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Co warto wiedzieć 
na początek 


Zanim w kolejnych rozdziałach zajmiemy się tworzeniem 

stron internetowych i aplikacji webowych z wykorzystaniem 
języka JavaScript, poznajmy inne bardzo ważne technologie, 
bez których nie dałoby się w praktyce stosować JavaScriptu. 


Są to HTML, CSS i PHP 


ardzo często na stronach tej książki 

będziemy używać nazwy JavaScript 
w odniesieniu do języka programowania na 
potrzeby aplikacji i stron internetowych. Po- 
pularnie określa się go po prostu skrótem od 
JavaScript - JS. Będziemy tych dwóch wy- 
rażeń używać zamiennie. Celem tej książki 
jest zapoznanie Czytelników z podstawami 
programowania w JavaScripcie oraz innych 
technologiach internetowych, aby w przy- 
szłości mogli realizować projekty webowe 
na własne potrzeby. 


Strona internetowa = czym jest? 

W dużym skrócie jest to zbiór różnego typu 
elementów, które powinny być logicznie 
uporządkowane w celu wyświetlania w prze- 
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POZNAJMY HTML 


HTML (HyperText Markup Language) to 
język znaczników, który służy do two- 
rzenia dokumentów hipertekstowych. 
Pozwala opisać strukturę informacji 
zawartych wewnątrz strony internetowej. 
Dzięki znacznikom możemy nadać od- 


powiednie znaczenie konkretnym frag- 
mentom tekstu i w ten sposób formować 
hiperłącza, akapity, nagłówki, listy itp. 
HTML umożliwia określenie wyglądu 
dokumentu w przeglądarce internetowej. 
Do szczegółowego opisu formatowania 
akapitów, nagłówków, czcionek, kolorów 
zalecane jest jednak korzystanie z CSS. 
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World-Wide Web Bibliography 
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Te pisać r pore dr 
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The Whole Internet 


Rok. al "Fe Wade DSTEJENIET Ua Code 
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Line Mode Browser user guide 

A cze of tte une mode tezwyer kygerten: naer pić io uz tet Alho zradabie cuz zaczynam 7 TY echo 10 101 wem swannć m pb ww de te cad <d 
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The "'W3 Book" 


glądarce użytkownikowi końcowemu. Ele- _ jedynie część wizualną - frontową, inaczej 
menty na stronie internetowej połączone są _ nazywaną frontend. 

za pomocą hiperlinków. Strony internetowe 

mogą być zakładane w celu spełniania różż Aplikacja webowa - czym jest? 
norodnych zadań, na przykład prowadzenia _ Wbrew temu, co często się sądzi, aplikacja 
bloga, udostępnienia informacji na temat  webowa nie jest zamiennikiem strony inter- 
naszej firmy itp. Głównym ich celem jest _ netowej, ale jej alternatywą. Jest to element 
prezentacja pewnego rodzaju danych. Cha- pośredni pomiędzy stroną internetową a apli- 
rakter stron jest właściwie zawsze pasywny kacją, którą uruchamiamy w konkretnym 
i można powiedzieć, że głównie zawiera systemie operacyjnym. Tak więc precyzyjnie 


4 uspłuskomputerswat.pl/icnt + cm 
Sklep HSSŃEEEJ  E-Prenumerata Moje konto - 
Moje produkty | Moje programy | Mojebonusy | Mojekody | MojeUlukion | Chęto Zarejestruj kod 
Fltru 
Komguter Świat _ Niezbędnik Książki | E-wydania fremium 


WAKACJE 


Komputer Świać Speciał 


Moe jod tam prana 


Strona ksplus.pl po zalogowaniu na konto użytkownika - jest to przykład interaktywnej aplikacji webowej 


JAVASCRIPT, HTML, CSS, PHP, WORDPRESS 


5 


adam1l3zajacigmail.com 


co warto wiedzieć na początek 


My first PHP page 


a liczba od 


G £ nodejs dev 0001-01 --3000lod 


Server running at http://127.0.0.1:3000/ 


Hello, Sara 
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My Store 


Nolty Me 


Phone Mini 


Phone Standard 


t: 2022-06-14707:3414%6.09TZ — Mash: Jebtof. 


mqed e 


2022-06-14707:14147.2627 — Mash: Jeborf: 
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co warto wiedzieć na początek 


Trzy warstwy standardowych technologii internetowych 


mówiąc, jest to program dostępny w oknie 
przeglądarki internetowej. Oznacza to, że 
aplikacja webowa ma charakter interaktyw- 
ny - można wykonywać na niej różnego ro- 
dzaju akcje. 

Aplikacje webowe składają się z kilku 
warstw. Jedną z nich jest frontend, czyli 
część wizualna, najczęściej tworzona za 
pomocą na przykład HTML-a, CSS i Java- 
Scriptu. Aplikacja zawiera też warstwę 
backendową (kod aplikacji, program wyko- 
nywalny), dość często opisany w PHP. Tak 
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naprawdę jednak obecnie kod backendowy 
aplikacji może być tworzony w praktycznie 
dowolnym języku, bo dzięki odpowiednim 
frameworkom, które zapewniają niezbędną 
integrację i udostępniają potrzebne biblio- 
teki, będzie działać w dowolnej przeglą- 
darce. 

Największą zaletą takiego rozwiązania jest 
to, że aplikacja interaktywna może być do- 
wolnie rozbudowywana i dostępna w dowol- 
nej przeglądarce na dowolnym urządzeniu. 
Z punktu widzenia biznesowego jest to ide- 
alne rozwiązanie, gdyż bez żadnego proble- 
mu, wykorzystując jedynie jedną aplikację 
webową, możemy dotrzeć do ogromnej 
grupy użytkowników, którzy muszą mieć 
tylko dostęp do internetu i przeglądarkę. 


JavaScript to język programowania, który 
umożliwia wdrożenie na stronie interneto- 
wej skomplikowanych elementów, dzięki 
którym strona ta może nie tylko wyświetlać 
statyczne informacje, ale również obsługi- 
wać zmianę treści odpowiednio do sytuacji, 
wyświetlać interaktywne mapy i animacje 
grafiki 2D/3D, wideo itd. 

Jest to trzecia warstwa standardowych tech- 
nologii internetowych, poza HTML-em i CSS. 
Pozwala na tworzenie dynamicznych stron 
oraz aplikacji webowych. 
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Jak to działa w praktyce? Tworzymy 
dynamiczną etykietę na stronie 


p oznane przez nas trzy podstawowe war- 
stwy układają się jedna na drugiej. Jako 
prosty przykład posłuży nam dynamiczna 
etykieta tekstowa. Na początku nie musimy 
korzystać z rozbudowanych narzędzi dewe- 
loperskich do tworzenia witryn ani pisać 
skomplikowanego kodu. Wystarczy nam 
Notatnik lub polecany do kodowania No- 
tepad++ MIEUAUTIYE, który czytelniej 
prezentuje składnię kodu. 

Tak podstawowe narzędzie będzie zupełnie 
wystarczające, gdyż kod strony internetowej 
zapisany jest w pliku tekstowym lub, precy- 
zyjniej określając, w pliku z hipertekstem 
i bez problemu będziemy mogli go tworzyć 
w dowolnym edytorze tekstowym. 


Warstwa HTML 
Rozpoczynamy od wprowadzenia tekstu dla 
tej właśnie warstwy. 


Pisanie naszej strony z etykietą zacznie- 
my od linii tekstu - <!DOCTYPE html>. 
W ten sposób informujemy przeglądarkę 


internetową, że ma do czynienia ze stroną 
napisaną w HTML-u. 


Plik Edycja Widok Format 

aBHAG a Ga A| * hÓ| 2 

Elbytietahtmi EJ |Efr=" p: | EHnew 3 a|H> 
<IDOCTYPE html3 


Składr| 


Szukaj 


Teksty zapisane w nawiasach ostrokąt- 

nych nazywamy znacznikami (taga- 
mi). Wiele znaczników ma część otwiera- 
jącą i zamykającą. Tak jest na przykład ze 
znacznikiem html. Służy on do oznaczenia 
całości strony. Pokazuje, gdzie się ona za- 
czyna i gdzie się kończy. Otwierająca część 
znacznika to jedynie jego nazwa w nawiasie 
ostrokątnym. Zamykająca dodatkowo przed 
nazwą zawiera ukośnik. W kolejnych dwóch 
liniach zapiszmy zatem <html> i </html>. 
Oprócz tego od razu również w tagu otwiera- 
jącym dodajemy deklarację języka witryny - 
lang="pl-PL" - dzięki temu robot wyszuki- 


NAJPIERW TWORZYMY ODPOWIEDNI DOKUMENT 


Cała napisana podczas realizacji tego 
przykładu strona będzie dokumentem 
HTML. Przed rozpoczęciem pisania warto 
utworzyć w edytorze Notepad++ plik w od- 
powiednim formacie, by program mógł 
prawidłowo kolorować tekst i stosować 
autouzupełnianie zgodne z zasadami 


używanego języka. 


Uruchamiamy pro- 
gram Notepad++. 
Klikamy w górnym le- 
wym rogu na symbol 
tworzenia nowego do- 
kumentu lub klikamy na [2I%, LÓTŃ. 


[Ef *new 1 Notepad! : 
Plik Edycja Szukaj V 
o 3 A B 8 le 
Hinrew 1B |Hirew 2 xj| 


Zanim zaczniemy FRZESZE 
wprowadzać kod, 
NILELWALENPIKAJ 2. 
CENIEŻ i podajemy 
nazwę dla nowego 
pliku, w naszym 
przykładzie będzie 
to Etykieta.html. 


Plik Edycja Szukaj Widok Format 


Otwórz folder zawierający 
wórz bieżący w dornyślnyrm progi 


Dodaj folder do obszaru roboczego 


Zapisz jako 


Nazwa pliku: | Ft 

LO CYAN O (VEYZZUĄ zapiszjako typ: Alltypes (*.:) 
ne w tym doku- 

mencie wyrażenia i składnia będą in- 

terpretowane jako napisane w HTML-u 

i odpowiednio kolorowane. Dzięki temu 


kod strony będzie czytelniejszy. 
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co warto wiedzieć na początek 


warki będzie w stanie poprawnie ją sklasyfi- 
kować. Podajemy tutaj deklarację zgodną ze 
standardem HTMI5. 


[Ef +D-GtronalEtykieta.html - Notepad++ 


Plik Edycja Szukaj Widok Format Składnia Ustawienia N 


gs sA YSRÓ|BE|Mm*a|4 


him E3 | rew 2 £3| Hirew 3 03] Przyklad _1htmi 3] 


boczi html3 


= lang="pl-PL"> 


</html> 


Dalsze znaczniki będziemy zapisywać 

wewnątrz znacznika html. To znaczy 
- po znaczniku otwierającym, ale przed 
znacznikiem zamykającym. W ten właśnie 
sposób konstruuje się strukturę dokumentu. 
Wnętrze takiego znacznika html powinno 
składać się z dwóch sekcji - head i body, 


ieta himi EJ JEMrEwZEJ|ETrEw3UJ] 


EIDOCTYPE htm1> 


-|<html lang="pl-PL"> 
<head> 


</head> 
</html> 


JU A WD -- 


czyli nagłówka i treści. Najpierw otwieramy 
i zamykamy znacznik head, a dalej powinno 
znaleźć się otwarcie i zamknięcie znacznika 
body. Head to nagłówek. W tej części zapisu- 
jemy treści bardziej techniczne, dotyczące 
działania dokumentu. A w części body sku- 
piamy się na treści, czyli na tym, co widać 
na stronie. 
KZMEJEEZECEZECEZZ 


1 SIDOCTYPE LLml2 


H<htLuml lanyg—"pl-PL"> 


E <litai> 
</head> 
<body> 
</podyj 

</html> 
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W sekcji head można między innymi 

określić, jaki ma być napis na pasku tytu- 
łowym strony. Służy do tego znacznik title. 
Otwieramy więc znacznik, wpisujemy tytuł, 
a następnie zamykamy znacznik. 


sSJEJa w GB|4WDÓ|ZCEC|ME| X <|LWEJ 


<IDOCTYPE ntmiż 
-J<html lang="pl-PL"> 
= head 
<title>Etykieta przykład w JavaScriptj<c/title> 
</nead> 


<body> 


</body> 
</html> 


el Brykieta hemi E3 |lrow 2 «3 Flrow 3 3] El Przydad 1a 13] 


Istotnym elementem, jakiego można użyć 

w sekcji head, jest znacznik meta, któ- 
ry pozwala na określenie metadanych. Jedną 
z możliwych i najczęściej stosowanych form 
użycia tego znacznika jest <meta charset 
="utf-8”> - przy tym znaczniku nie musimy 
stosować zamknięcia. Ten zapis pozwala na 
ustawienie kodowania strony z wykorzysta- 
niem Unicode. Bez użycia tego znacznika 
niektóre z przeglądarek internetowych mogą 
mieć problem z prawidłowym wyświetla- 
niem polskich znaków na stronie. 


[M *DAStronaiEtykieta.htmi - Notepad++ 


POZELENNCJESILJKIJI KIEZJIEY 


Plik Edycja Szukaj Widok Format Składnia Ustawienia Narzędzia Makra U 


IJ 


Emohm FI row 2 3| Eo dj 3| Brmand_tni ą| 


SIDOCTYPE htmiż 


=|<html lang*"pl-PL"> 


<head> 
<meta charset="utf-8"Ą 


<rirle>Etykieta przykład w JavaSoript</rirle> 
</nead> 
-| <body> 


</body> 
</html> 


W sekcji body umieszczamy faktyczną 

treść strony. Możemy zapisać ją wewnątrz 
znacznika p, co oznacza paragraf (akapio, lub 
nagłówków tekstowych h1, h2 itp. Treści 
umieszczone w sekcji body są wyświetlane na 
stronie w takiej kolejności, w jakiej są tam za- 
pisane. Jeśli chcemy wstawiać na swoją stronę 
kolejne wpisy, by były widoczne u góry strony, 
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[ "DStronal Etykieta. html - Notepad++ 
Phk Edycja Szukaj Widok Format 
BRE ŁZA 4RKOJOC|Ak Rz/ZGBIZ 


Jl Etytceta htmi C3 | row 2 03] now 103] A Poyoc_ Va 13] 


EHDocTYPE htm1B = 


Składnia Ustawienia Narzędzia Makra 


j<html lang="pl-PL"> 


<head> 

<meta charser="utf-8">Ą 

<ritle>Etykieta przykład w JavaSoript</ritle> 
</nead> 


ię użytkownika: Krzysiek</p> 


jako treści aktualne, można dopisywać je na 
samym początku sekcji body. 


Teraz zapisujemy nasz dokument, klika- 

jąc na Zapisz lub korzystając ze skrótu 
[cn]+[5J. Przechodzimy do folderu, w którym 
znajduje się nasz plik, i klikamy na niego 
dwukrotnie - powinna zostać uruchomio- 
na nasza domyślna przeglądarka z lokalnym 
podglądem wskazanej przez nas strony. 


pnianie Widok 


Dysk lokalny (D:) > Strona 


tej Nazwa 


nternctow 


© Etykieta.html 


W widoku strony możemy bez problemu 

sprawdzić, że nadany przez nas tytuł jest 
widoczny oraz stworzony przez nas paragraf 
zawiera podaną przez nas treść. Dodatkowo 
wszystkie polskie znaki zostały poprawnie 
wyświetlone dzięki temu, że określiliśmy 
kodowanie strony. 


© Etykieta przykład w JavaScript (X + 


G  QOPlk| DyStrona/Etykieta.htmi 


Imię użytkownika. Krzysiek 


Jest to czysta strona HTML, która jak łatwo 
zauważyć, jest zupełnie pasywna - możemy 
jedynie odczytać informacje zapisane w ko- 
dzie źródłowym strony. Czas dodać warstwę 
CSS, która umożliwia zarządzanie wyglądem 
poszczególnych sekcji. 


Warstwa CSS 

Podstawowa treść strony została już zapisana. 
Mając już podstawową treść strony, można 
przejść do określenia wyglądu dla poszcze- 
gólnych jej elementów. W naszym prostym 
przykładzie mamy jedynie sekcję <p>, czyli 
paragraf, któremu możemy nadać styl. 


W celu dodania formatowania CSS do na- 
szej strony należy w sekcji head umie- 
ścić znacznik style. 


ĘEl<html lang="p1l-PL"> 
<head> 

5 <meta charset="utf-8"> 
6 <title>Etykieta przykład w Java$cri 
<style> 


</style> 

| </head> 

<body> 

12 <p>Imię użytkownika: Krzysiek</p> 
13 F </body> 

14 -</html> 


[i 


Wewnątrz niego zapisujemy nazwy 

znaczników, dla których chcemy zmienić 
wygląd. My chcemy zmienić styl tekstów dla 
treści zapisanych w znacznikach p. Dlatego 
nazwę tego znacznika umieszczamy w sekcji 
style. By dla znacznika 
zmieniać poszczególne 
właściwości dotyczące 
wyglądu, trzeba wpisy- 


<style> 
pi 


, 


ża * </style> 
wać ich nazwy w na: <aEGÓR 
wiasie klamrowym. <body> 


Ponieważ jest to jedynie przykład, nie 

będziemy zgłębiać poszczególnych wy- 
rażeń służących do opisu stylu dla poszcze- 
gólnych znaczników. W naszym przykładzie 
użyjemy aż 12 reguł - jeśli chcemy dowie- 
dzieć się, co każdy z nich oznacza, może- 
my uzyskać więcej informacji na stronie 
developer.mozilla.org/pl/docs/Web/CSS 


Po dodaniu tekstu tak jak na ilustracji na 
kolejnej stronie wystarczy zapisać nasz 
dokument i ponownie otworzyć w domyśl- 
nej przeglądarce. Jak widać, dodane przez 
nas style dla paragrafu zadziałały, mamy już 
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co warto wiedzieć na początek 


4 Fl <head> 
5 <meta charset="utf-8"> 
£ <rirle>Rtykieta przykład w JavaSoript</title> 
<style> 
pt 
a font-family: 
10 letter-spacing: 1px: 
iz text-transform: uppercase; 


'helvetica neue', helvetica, sans-serif; 


12 text-align: oenter; 

3 border: 2px solid rgba(0,0,200,0.6); 
14 background: rgba(0,0,200,0.3); 

15 color: rgba(0,0,200,0.6); 


17 porder-radius: 10px; 
padding: 5px 1O0px; 


12 


20 cursor: pointer; 
21 , 

ż2 </style> 

PE) |  </nead> 

24 | <body> 


1 
1 
1 
16 pox-shadow: 1px 1px 2px rgba(0,0,200,0.4); 
1 
1 
1 


19 display: iuline-bluck; 


25 <p>Imię użytkownika: Krzysiek</p> 


na naszej stronie dwie warstwy - HTML oraz 
CSS - które pozwalają na uzyskanie ciekawe- 
go designu. 

Do tego momentu tworzona przez nas strona 
nie była interaktywna - czas dodać do niej 
element dynamiczny, z którym będziemy 
mogli wchodzić w interakcje. W tym celu 
musimy dodać kolejną warstwę - JavaScript. 
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Warstwa JavaScript 

Do tej pory przedstawione przez nas war- 
stwy HTML oraz CSS miały na celu jedynie 
zobrazowanie, jak krok po kroku tworzone 
są strony internetowe. Teraz przechodzimy 
do najciekawszej warstwy, która pozwala już 
na pisanie złożonego kodu logicznego, w ra- 
mach którego możemy wchodzić w interak- 
cję z użytkownikiem i tworzyć dynamiczne 
strony oraz aplikacje webowe. W ramach 
naszego przykładu Etykieta.html to strona 
internetowa, która wyświetla sformatowa- 
ny paragraf, który wyglądem przypomina 
przycisk. Zawiera on informacje o imieniu 
użytkownika. Dzięki JavaScriptowi dodamy 
teraz możliwość klikania na ten przycisk 
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i sprawimy, by po wykonaniu tej akcji można 
było podać nową wartość, która będzie pre- 
zentowana na stronie. 


Rozpoczynamy od dodania znacznika 
script w sekcji body. Warto wiedzieć, że 
znacznik script możemy również umieszczać 
wewnątrz innych sekcji, na przykład head. 
21 ? 
22 - </style> 
23 | </head> 


Ę <body> 
<p>Imię użytkownika: Krzysiek</p> 


i <script> 


</script> 
- </body> 
31 -</html> 


Teraz chcemy, aby użytkownik mógł 

wchodzić w interakcję z paragrafem 
dodanym powyżej. W tym celu definiujemy 
zmienną paragraf, która będzie wskazywać 
na paragraf dodany w kodzie HTML. 


<body> 
<p>Imię użytkownika: Krzysiek</p> 


<script> 
const paragraf = document .querySelector('r'): 


Następnie dodajemy obsługę zdarzenia 
kliknięcia na paragraf poprzez wykorzy- 
stanie metody addEventListner. Definiuje- 
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my, że po kliknięciu ma zostać uruchomiona 
funkcja zmienNazwe. 


</head> 
<body> 
<p>lmię użytkownika: Krzysiekć/p> 


<script> 
const paragraf — document.qucrySclector('p'); 


paragrar.addkventListener('ciick', zmienNazwe) .| 


Pozostaje nam dodać wspomnianą funk- 
cję. Wprowadzamy kolejną zmienną, która 


W celu sprawdzenia działania stworzo- 
nej przez nas funkcjonalności zapisujemy 
plik i otwieramy go w przeglądarce. 
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function zmicenNazwe() ( 
const name = prompt('Podaj nowe 


imię') : 


paragraf.textContent = 'Imię użytkownika: $fname]'; 


Na pierwszy rzut oka wszyst- 
ko wygląda tak samo, jednak 
po kliknięciu na nasz przycisk - 


) : 
</acript> w tym wypadku paragraf - poja- 
</body> wia się okno z prośbą o podanie 
Z tekstu. 
będzie odpowiedzialna za wywoływanie | e =w= * + 
okna z prośbą o wprowadzenie tekstu, © © | Dytonayttyielahtni KENT E" 


i procedurę zmiany imienia widocznego 
w naszym paragrafie na tekst wprowadzo- 
ny w wyskakującym oknie. 


Cała strona wygląda następująco od 


Ka deo 


Ć 


strony kodu: 


Hietkaeta ti £3 |inów 2 C3| lnew 3 £3| EJ Przydod_ 1a 3] 


Po wprowadzeniu nowego tekstu 


[| 2  EfpocTtPe ntm5 

3 Ę<htm1l lang="pl-PL"> 

ś EE <nead> 

5 <mera charser="utf-8"> 

6 <title>Etykieta przykład w JavaScript</title> 
z <style> 

i p (l 

8 font-family: 
letter-spacing: 1px; 
text-transform: uppercase; 


12 text-align: center; 
13 border: 2px solid ryba(0,0,200,0.6): 
14 background: rgba(0,0,200,0.3); 
15 color: rgba(0,0,200,0.6); 
1€ box-shadow: 1px 1px 2px rgba(0U,U,200,0.4); 
border radius: 1Upx: 
18 padding: 3px 1Upx: 
13 display: inline-block: 
20 enrsor: pointer; 
, 

</style> 
</head> 
<body> 

<p>Imię użytkownika: Krzysiek</p> 


1 


n 2 wł 
MW—— 


<script> 
const paragraf = document.querySelector('p'): 


paragraf.addEventListener('click', zmienNazwe) ; 


ODEON 


- function zmienNazwe() ( 
33 const name = prompt('Podaj nowe imię'); 
34 paragraf.textContent = 'Imię użytkownika: 
35 , 
36 </script> 
3 </body> 
3 - </html> 


"*helvetica nane', helvetica, sans-serif; 


$(name)*; 


zawartość strony zostanie dyna- 
micznie zmieniona. 
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Jest to jeden z najprostszych przy- 
kładów wykorzystania HTML, CSS 
oraz JS do stworzenia interaktywnej 
strony. Oczywiście można tworzyć 
zdecydowanie bardziej skompliko- 
wane strony. W kolejnym rozdziale 
zobaczymy, w jaki sposób można 
szybko tworzyć dynamiczne stro- 
ny bez zbędnego wysiłku - niejako 
idąc na skróty i dodatkowo bez zna- 
jomości języków programowania. 
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Idziemy na skróty 
- własny blog 
lub strona od ręki 


Stworzyć stronę WWW czy aplikację webową zupełnie 
od podstaw to dość trudna sprawa. Przeczytajmy więc 
na początek, jak ułatwić sobie to zadanie, posłużyć się 
sposobem i praktycznie bez żadnej wiedzy szybko założyć 


bloga i własną stronę 


W ielu użytkowników rozpoczyna swoją 
przygodę z tworzeniem stron od bloga 
lub prostej witryny zarządzalnej z poziomu 
interfejsu graficznego. 

W takim wypadku nie jest konieczna prak- 
tycznie żadna wiedza z zakresu technologii 
internetowych, a informacje umieszczone 
w pierwszym rozdziale świetnie sprawdzą 
się jako wprowadzenie. 


Tworzenie strony i jej cel 

Przy tworzeniu strony WWW ważny jest po- 
mysł. Należy zadać sobie pytanie, co nasza 
strona ma zawierać, o czym ma być, do jakich 
osób chcemy dotrzeć i co przez to osiągnąć. 


HISTORIA STRON WWW 


Tworzenie stron internetowych ma za sobą 
już całkiem długą historię. Właściwie już 
ponad 30 lat. Pierwszą stronę internetową 
stworzył około 1990 roku Tim Berners-Lee 


— jeden z twórców całej usługi WWW, czyli 
ogólnodostępnych stron internetowych. Jej 
adres to info.cern.ch i nadal można ją od- 
wiedzić. Od tego czasu na świecie pojawiły 
się ponad 2 miliardy stron - aktywnych 
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Zdecydowanie najlepiej jest tworzyć strony 
na tematy, które nas interesują. Jeśli spełnimy 
ten warunek, będzie nam łatwiej, bo dodawa- 
nie treści i dbanie o wygląd witryny będzie 
sprawiało nam przyjemność i pozwoli nam 
rozwijać pasję i dzielić ją z ludźmi o podob- 
nych zainteresowaniach. Wtedy praca nad 
stroną będzie bardziej przyjemnością niż 
pracą. 

Chociaż, oczywiście, im bardziej będziemy 
zagłębiać się w temat tworzenia stron, tym 
więcej będzie pojawiać się trudności i z cza- 
sem okaże się, że potrzebujemy bardziej za- 
awansowanych narzędzi - poznamy je w ko- 
lejnych rozdziałach. 


na co dzień pozostaje ponad 100 tysięcy. 
Ma to związek z koniecznością płacenia 
za domeny i utrzymywania serwerów. Jeśli 
ktoś znudzi się swoją witryną i nie opłaci 
domeny - jego strona przestaje istnieć 
wsieci. 

Nie będziemy jednak zagłębiali się w to, 
w jaki sposób strony były tworzone kiedyś 
- ważne jest to, jak tworzone są obecnie. 
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SPRAWDZAMY KOD STRONY 


Wszyscy korzystamy z przeglądarek gra- 
ficznych, więc strona internetowa jest 
dla nas po prostu graficzną interpretacją 
kodu, który jest wszyty w backendzie 
strony. To właśnie interpretując ten kod, 
przeglądarka zamienia setki linijek tekstu 
z różnymi znaczkami na czytelną dla nas 
witrynę, która jest interaktywna. 

Jeśli jesteśmy ciekawi, jak wygląda kod 
strony internetowej, którą aktualnie 
przeglądamy, możemy to łatwo sprawdzić. 
Oto, jak to zrobić za pomocą przeglądarki 
Google Chrome (w innych przeglądarkach 
opisane kroki są podobne). 


Uruchamiamy przeglądarkę i wcho- 
dzimy na witrynę, której kod chcemy 
sprawdzić. 


Następnie klikamy prawym przycis- 
kiem myszy na wolną przestrzeń strony 
i wybieramy z menu dialogowego opcję 


ybierz zródło stronyż 


Strona główna witryny komputer- 
swiat.pl ma ponad 6000 linii kodu. 
Jest to bardzo rozbudowana witryna, która 
ma w sobie osadzone różnego rodzaju 


Proste narzędzie na początek 
Nowe strony są tworzone za pomocą HTMI5, 
CSS 3, JavaScriptu. Ale jeśli nie znamy się 
w ogóle na programowaniu, nie musimy za- 
łamywać rąk. 


Program do pobierania filmów z internetu za 
darmo dla czytelników Komputer Świata 


Jedli chorzy błyskawicznie i bezzrodlemowo pobe4ć wiówo z imhernetu, zakistań.jy Fast Video 
Dowriosce 


odnośniki, grafiki, filmy oraz reklamy. 
Nasza pierwsza strona nie będzie aż tak 
efektowna, ale przeglądanie różnych 
witryn może być inspirujące. 


Początkujący mają do wyboru całkiem sporo 
łatwych w obsłudze narzędzi. 

Najprościej jest skorzystać z serwisu blogo- 
wego, takiego jak Blogger, opisanego na ko- 
lejnych stronach. To kreator typu SaaS, czyli 
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własny blog lub strona od ręki 


oprogramowanie jako usługa działająca online, 
w oknie przeglądarki. W przypadku takich 
kreatorów użytkownik nie musi niczego insta- 
lować po swojej stronie i wykonuje wszelkie 
operacje przez internet, a serwer, pliki i inne 
dane znajdują się w chmurze usługodawcy. 

Bardziej zaawansowanym narzędziem, 
wciąż jednak ogromnie ułatwiającym two- 
rzenie stron internetowych, jest WordPress 
omówiony w kolejnym rozdziale. Word- 
Press jest najpopularniejszym i darmowym 
CMS-em, czyli systemem zarządzania tre- 


ścią. Gdy korzystamy z takiego narzędzia, 
w ogóle nie interesuje nas kod strony, 
musimy jedynie wprowadzać tekst i nim 
zarządzać, ewentualnie dodając elementy 
graficzne. Takie rozwiązanie pozwala na 
utworzenie własnej strony szybko, sprawnie 
i bez znajomości programowania. 
Zdecydowanie najbardziej popularne w wy- 
padku blogów są narzędzia typu CMS, choć 
podejście SaaS zdobywa coraz więcej zwo- 
lenników ze względu na brak konieczności 
utrzymywania serwera. 


Czwartek, 16 stycznia 


Przepis na pyszny deser 


The works of Berthe 
Marisot, 1800s-era 
French painter 


WordPress - jedno z najpopularniejszych narzędzi typu CMS do tworzenia stron internetowych 
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Squarespace - angielskojęzyczna strona, 
która oferuje bardzo dużo gotowych szablonów 
i umożliwia tworzenie różnego typu stron 
internetowych, nie tylko blogów 


4 akładamy, że chcemy stworzyć bloga 
o tematyce kulinarnej, który ma być 
prosty w tworzeniu i utrzymaniu. Takie za- 
danie łatwo zrealizujemy za pomocą serwisu 
Blogspot. 

Uwaga! Stronę w serwisie Blogger najlepiej 
tworzyć w przeglądarce Chrome, Firefox, Sa- 
fari lub MS Edge. Są to przeglądarki oficjalnie 
wspierane i zatwierdzone przez twórców. 


Otwieramy jedną ze wspieranych prze- 
glądarek, na przykład Google Chrome, 
i wchodzimy na stronę: https:;//www.blog- 
ger.com/about. Po załadowaniu strony 
klikamy na Utwórz bloga na środku ekranu. 


Weebly - platforma umożliwiająca łatwe tworzenie 
stron internetowych bez programowania 


sjach — na swój sposób 


Następnie logujemy się za pomocą konta 
Google. Jeśli go nie mamy, musimy naj- 
pierw je założyć. 
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Soad cy sieci będą mogli trafić na naszego bloga. 
9 Dobrym pomysłem jest zawarcie w adresie 
Wybierz konto tytułu bloga. Jeżeli podany adres będzie do- 
stępny, możemy kliknąć na przycisk Dalej, 
Krzysiek Dziedzic by przejść do kolejnego kroku. 
krzysieł "uk" „ZG Tok 
W kolejnym oknie podajemy tytuł nasze- Wybierz URL dla swojego bloga 
g0 bloga i klikamy na Dalej. Ten adres internetowy pozwoli użytkownikom znaleźć Twojego 
bloga w sieci 
Wybierz nazwę bloga A 
kolorykuchni „blogspot.com 
To jest tytuł, który będzie wyświetlać się u qóry Twojego bloga. O ORA 
Tytuł 
Kolory kuchni 
WSTECZ ANULUJ DALEJ 
m Określamy naszą nazwę użytkownika 
m" wosk - to pod tą nazwą nasze wpisy poznają 


czytelnicy bloga. Po podaniu nazwy klikamy 
Następnie musimy podać adres naszej _ na Zakończ. 
strony - jest to bardzo ważny krok, gdyż 
to właśnie po tym adresie inni użytkowni- 


Potwierdź wyświetlaną nazwę 


Jaką nazwę użytkownika mają zobaczyć czytelnicy Twojego 


ZARZĄDZANIE m 
BLOGIEM icania 


ż Krzysiek_0] 
Od teraz po wejściu 
na stronę blogger. 
com zostaniemy 
przeniesieni do pa- Statystyka 
nelu zarządzania Komentarze 
blogami. Na tym SR 
ekranie kliknięcie w WSTECZ ANULUJ ZAKOŃCZ 
po lewej stronie 
na nazwę naszego kr 
bloga spowoduje Motyw Po chwili nasz blog zostanie utworzony 
rozwinięcie listy Ustawiecia i zostaniemy przeniesieni do panelu za- 
naszych blogów. RANETIE rządzania treścią. 


Możemy dodać ko- 
lejny blog, klikając „GE 
iEjNowy blogf NAD bloga po prawej stronie ekranu zostanie 
wyświetlona nasza strona. Domyślnie nasz 


wytwetogo Po kliknięciu na polecenie Wyświetl 


tutaj - Prywatność 
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Wszystkie (0) 


Brak postów. 


blog będzie zawierał jedynie tytuł oraz in- 
formację o wykorzystywaniu plików cookie. 
Na tym etapie już będzie on widoczny dla 
wszystkich użytkowników w sieci. Teraz mo- 
żemy przejść do tworzenia treści dla naszej 
strony. 


Dodajemy wpisy 

do naszego bloga 

Zanim przejdziemy do zmiany układu lub 
motywu naszego bloga, najlepiej jest do- 
dać kilka wpisów. Mogą być to dowolne 
treści, nawet niezawierające żadnych istot- 
nych treści. Pierwsze wpisy posłużą nam 
do przetestowania różnego typu układów 
oraz motywów w późniejszym etapie. Dzię- 
ki takim próbnym postom będziemy mogli 
zdecydować się, jak finalnie wizualnie ma 
wyglądać nasz blog i zaczniemy tworzyć 
właściwe posty. 


Kolory kuchni 


Po przejściu do pa- 
nelu zarządzania 
blogami wybieramy 
nasz blog, a następ- 
nie klikamy po lewej 
stronie na Nowy post. 


Kolory kuchni - 


++ NOWY POST 


B Posty 


Uruchomiony zostanie edytor postów. 
Wyglądem bardzo przypomina edytory 


tekstu takie jak Microsoft Office lub inne 
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własny blog lub strona od ręki 


tego typu. Dzięki temu praktycznie każdy 
użytkownik będzie mógł bez problemu two- 
rzyć treść. 


Pamiętajmy, aby zawsze dodawać tytuł 

naszego postu - dzięki temu łatwo będzie 
później nimi zarządzać. Wprowadzając treść 
bloga, korzystajmy z różnych stylów, na przy- 
kład Nagłówek, Akapit, Podtytuł - łatwiej 
będzie nam formatować tekst. 


1T- Nagłówek B z U z 


Nagłówek nadrzędny 
Nagłówek 

Podtytuł 

Nagłówek podrzędny 
Akapit 


Normalna 


Do postu możemy dodawać również ob- 

razy oraz filmy wideo. W celu dodania 
obrazu klikamy na pasku narzędziowym na 
ikonę obrazu, a następnie wybieramy źródło 
zdjęcia. 


bMBu- © =- EE 


€> Prześlij z komputera 


4+ Zdjęcia 


E) Blogger 


GD  Zadresu URL 


Jeśli mamy bibliotekę zdjęć w usłudze 
Google Zdjęcia, będziemy mogli szybko 
wstawiać zdjęcia na bloga. 


Po prawej stronie możemy, korzystając 
z funkcji Lokalizacje, wskazać miej- 
sce związane z tworzonym przez nas po- 
stem. Jest to istotne, zwłaszcza gdy tworzy- 
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my post związany | a. 
z jakąś konkretną 


lokalizacją. Split Qą 

RETOTEORENECE 

Gdy już zakoń- | Mercegowi 

czymy edytowa- u. Saraje 
nie postu, klikamy RAN 

w prawym górnym 4 SW 


rogu na Opublikuj. zeta Z i 
Jeśli nie jesteśmy s 
pewni, czy post nie 
ma błędów, nie mu- 
simy się martwić, 


CZEGŻ 
ne mapy  Warunko korzystania 2 proyamu 


21000. Split, Chorwacje X 


gdyż w każdej chwili 
będziemy mogli wy. L_—— 
dytować jego treść. 
edytować jego treść. |; 
Następnie klika- 
my na Potwierdź. 


Opublikować posta? 


Spowoduje to opublikowanie tego posta na blogu. 


ANULUJ POTWIERDŹ 


Po chwili nasz post zostanie opublikowa- 

ny i będzie widoczny w oknie zarządza- 
nia blogiem. Klikając na niego w tym oknie, 
od razu przejdziemy do ponownej edycji. 


DI Post Eóytyj x (© Sogger $ost x + 


< > C a biogyercom, 


Wszystkie (2) 


BH Posy 
in Statystyka 


HĄ Komentarze 


Zarobki 


$ 
1 0;* chcemy przejść do naszego po- 
stu i sprawdzić, jak się prezentuje dla 
każdego czytelnika, wystarczy, że wejdziemy 
na adres naszego bloga, a następnie kliknie- 
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Pierwszy post! 


Witam na mom Diogu poświęconym kuchni I wszystkiemu co z nią mase Pojawiać się DĘGĄ tu 


treści związane z gotowaniem, jak również z samym jedzeniem. 


my na Czytaj więcej przy naszym nowo do- 
danym poście. 


Zarządzamy motywem 

naszego bloga 

Domyślnie sporą część bloga zajmuje prze- 
strzeń z profilem użytkownika zlokalizowa- 
na po lewej stronie. Jest to spowodowane 
wyborem konkretnego motywu dla bloga. 
Możemy pozbyć się tego paska poprzez 
zmianę motywu lub zarządzanie układem. 
Dodatkowo, zmieniając motyw, możemy 


OPCJONALNE KOMENTARZE 


Możemy umożliwić czytelnikom bloga 
pisanie komentarzy do naszych postów. 
Wystarczy po pra- 


a Opcje 


wej stronie w polu 
Opcjela DZE 
Zezwalajfiyrczą icz 
zycji 
czytelników? 


Komentarze czytelników 


© zczwalaj 


dopasować go bardziej do 
tworzonych przez nas tre- 
ści i w ten sposób sprawić, 
że czytelnicy będą lepiej 
odbierali tworzone przez 
nas treści. 


Dynamic Views 


a 3 
Przechodzimy do pane- 
lu zarządzania naszym 


blogiem i po lewej stronie 
klikamy na Motyw. 


E) Układ 


TP Motyw 


SH: 
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Następnie po prawej 


WIĘCEJ TAKICH MOTYWÓW 


Ez Ph 


iRia" 


JK 
(C) $e sż e 
= 


przewijamy do moty- 
wu, który nam odpowiada, i klikamy na nie- 
go. Alternatywnie możemy kliknąć na Wię- 
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cej takich motywów, aby sprawdzić więcej 
motywów danego typu. 
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własny blog lub strona od ręki 


Westerny | maka wte 4 ne local babery imogt wył 0 + Gta © Paca rd w mordy Yaroo 
Maca a ug w luzeerw © Pam amm | man 4 praz uaadurpakani Rudy SECAM ka 3 EPROM © Har 
Jo GO RR LO o Gal w SA. Oy SO sa | OK 0 0 PY 
lawarta cz m4 m Ta ata arai Oysy Imo nau wide 


ara mem De mereta we pry wet zzmać to (kl preteni przodka Wy loggi Lir 2 PE me wma 
| | 008 go 10 fona my Preran Cune R A p MOG TP 4 Gl W, Po A 
o wkcGc Gaye dożooężczk 9 fama 0 14 rw party 

U Dee 01 


12 cza em 


Dynamic Views Classic 


PODGLĄD | DOSTOSUJ 


Po wybraniu konkretnego motywu mo- 
żemy kliknąć na Podgląd w celu spraw- 
dzenia, jak nasz blog wyglądałby z danym 


DOSTOSOWYWANIE MOTYWU 


Jeśli chcemy jeszcze bardziej dopasować 
motyw do naszych potrzeb, po wybraniu 
po prawej stronie w panelu zarządzania 
pola |UMMSTN po lewej przy naszym moty- 
WOMIZELNALEYDostosujł 


Mój motyw 
Dynamic Views Classic 


€ > © 4 biogytrcem/biogytewrcycustownieen/54159E253407256461 


<Q 


„ _ Kolory kuchni 
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motywem. Jeśli nam się podoba, klikamy na 
polecenie Zastosuj. 


Potwierdzamy wybór nowego motywu, 
klikając na OK. 


Niektóre gadżety mogą stać się 
widoczne 


Pamiętaj, że gdy zastosujesz ten motyw, gadżety 
obecnie oznaczone jako ukryte mogą stać się 
widoczne. 


ANULUJ OK 


Możemy w tym oknie wybrać obraz tła 
lub główny motyw kolorystyczny. Żeby do- 
konać zmiany, wystarczy kliknąć na jedną 
z opcji, a następnie wskazać na przykład 


kolor. 

Układ 

| Zaawansowane 
Strona 


Czcłonka 


Domyślny 


Kolor tekstu 
Przezroczyste 


Kolory motywu 
cc 


DODAJ 


Kolor tla 
Przezroczyste 


Kolory motywu 


Możemy również 
wprowadzać bar- 
dziej zaawan- 
sowane zmiany 
dotyczące moty- 
wu, które będą 
miały wpływ na 
czcionkę, kolor 
tekstu, kolor tła 
i wiele innych 
parametrów. 

W celu zapisania 
zmian w naszym 
motywie na- 
leży w dolnym 
prawym rogu 
kliknąć na ikonę 
zapisywania. 


B a 
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UKŁAD STRONY 


W panelu zarządzania możemy również 
przejść do edycji układu danego motywu. 
Jest on różny dla różnych motywów. Dlate- 
go warto najpierw wybrać odpowiadający 
nam motyw, a dopiero potem popracować 
nad jego układem. 


W celu zmiany układu 
należy po lewej stronie 
panelu zarządzania kliknąć 


iEIUkładi 


Następnie po prawej stronie pojawi się 
okno z różnego rodzaju prostokątami, 


które nazywane są gadżetami. Odpowia- 
dają one za pola tekstowe i interaktywne 
na naszym blogu. Możemy je dowolnie 
przenosić, przytrzymując i przeciągając 


Aktywujemy reklamy dla bloga 

W przypadku korzystania z serwisu Blogger 
dodawanie możliwości wyświetlania reklam 
jest bardzo proste. Wystarczy przejść do za- 
kładki Zarobki i przeprowadzić konfigurację. 
Należy jednak pamiętać, że zbyt duża ilość re- 
klam może odstraszać naszych czytelników 
lub uniemożliwiać im komfortowe czytanie 
tworzonych przez nas treści. Należy zacho- 
wać balans pomiędzy treścią a ilością reklam. 
Bardzo aktywne blogi pozwalają na uzyskiwa- 
nie stabilnych dochodów co miesiąc. Możemy 
więc, tworząc bloga, dzielić się naszymi pasja- 
mi z innymi, a jednocześnie na tym zarabiać. 


Posty na blogu 


w nowe miejsca. Dodatkowo możemy 
również edytować konkretne gadżety. 


Edytując gadżet Posty na blogu, 

możemy na przykład zdecydować, ile 
postów będzie wyświetlanych na stronie 
głównej, ile komentarzy będzie widocz- 
nych, czy będą widoczne przyciski udo- 
stępniania, a nawet czy między postami 
mają być wyświetlane reklamy (musimy 
wcześniej przeprowadzić konfigurację 


WA.GUICEIZarobki); 


Po zakończeniu edycji konkretnego 
gadżetu należy przewinąć widok do 
samego dołu okna i kliknąć na F£TJEH. 


ANULUJ 


W panelu zarządzania 
przechodzimy do za- 
kładki Zarobki. 


BĄ Komentarze 


Następnie po prawej ||] strony 


stronie klikamy na 
Utwórz konto AdSense. 


Utwórz nowe konto AdSense 
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własny blog lub strona od ręki 


DLA KOGO WŁASNY BLOG 


Opisany tu proces tworzenia własnego 
bloga jest świetną propozycją dla użyt- 
kowników, którym brakuje wiedzy i chęci 
do nauki programowania, gdyż mogą 
w chwilę rozpocząć tworzenie swojego 
bloga. Jednak utworzona w tym serwisie 
strona zawsze będzie jedynie blogiem. 


Jeśli chcemy utworzyć bardziej złożoną 
witrynę, warto skorzystać z bardziej 
zaawansowanych narzędzi, na przykład 
WordPressa. W kolejnym rozdziale 
przeczytamy, co możemy z nim zdziałać 
i jak to zrobić krok po kroku na naszym 
komputerze, nie wydając nawet złotówki. 


NAZWA DOMENOWA A NASZA WŁASNA STRONA 


Jeżeli mamy już zakupioną domenę, 
możemy przekierować na nią naszego 
bloga, jeśli nie — klikamy na (LONGO. 


Korzystając z gotowych rozwiązań typu 
Blogger, musimy liczyć się z tym, że nasz 
blog będzie zlokalizowany na subdome- 
nie. Oznacza to, że jeśli chcielibyśmy, aby 
nasz blog miał adres kolorykuchni.com, to 
po skorzystaniu z Bloggera będzie miał 
adres kolorykuchni.blogspot.com. 

Jeżeli zależy nam na prywatnej dome- 
nie, musimy zapłacić jednej ze stron 
hostingowych. Możemy to również zrobić 
bezpośrednio z serwisu Blogger. 

Po lewej stronie 


a paneli zaza, KZKEZEÓW 


CYZTUEWSOZCUWALELNAENUstawienia: 


Teraz po prawej 
stronie przewijamy 


widok do pola [aTT'JIĘ 
kowaniejNAlKElLNALE 
dowa! 


Publikowanie 


Adres bloga 


Domena niestandardowa 
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Zostaniemy przeniesieni do serwisu 

Google Domains, gdzie możemy 
kupić odpowiadającą nam domenę. 
Wystarczy wybrać adres oraz rozszerzenie 
i wnieść opłatę za rok z góry. 
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Wypełniamy formularz rejestracyjny i kli- 

kamy na dole strony na Utwórz konto. 
Pamiętajmy o wyborze odpowiedniego kraju 
dla naszych odbiorców - dzięki temu reklamy 
będą lepiej dostosowane. 


Google AdSense 


Rejestracja 


Krzysiek Dziedzic 


2 


Twoja witryna 


krzysiek 


Lepiej wykorzystaj możliwości AdSense 


©) Tak. chcę otrzymywać spersonalizowaną pomoc oraz sugestie 


Q Nie, nie chcę otrzym: 
sugestii dotyczących poprawy skuteczności 


spersonalizowanej pomocy ani 


Wybór kraju lub terytorium 


BEZPIECZNY BLOG 


Jeśli zależy nam na bezpieczeństwie na- 
szym i naszych użytkowników, koniecznie 
aktywujmy opcję przekierowania HTTPS. 
Dzięki temu jeśli ktoś będzie chciał od- 
wiedzić naszą witrynę poprzez link z HTTP, 
co może narazić go na wyciek danych, 


od razu przekierujemy go na szyfrowaną 
wersję HTTPS. 


HTTPS 


Przekierowanie HTTPS 


Jeśli wyraziliśmy zgodę na spersonali- 

zowaną pomoc, AdSense samo będzie 
zarządzać reklamami i umożliwi ich wy- 
świetlanie na wszystkich urządzeniach. Po 
zapoznaniu się z informacjami klikamy na 
Wypróbuj. 


Następnie podajemy adres i tworzymy 
profil płatności, a potem czekamy na za- 
kończenie automatycznej konfiguracji. 


Pracujemy nad konfiguracją 


Zwykle sprawdzamy witrynę w kilka dni, czasami jednak 
Wtedy możesz zacząć zarabiać na wyświetlaniu reklam. 


Uwaga! Taka konfiguracja może potrwać 
nawet do kilku dni. 


Motyw 
W panelu zarzą- NRONWARM 


dzania blogiem po 
lewej stronie klikamy 


jelUstawienia; m 


Następnie po prawej stronie w opcji 
HTTPSEKWAWNEWAJYEOPrzekiero- 
wanie HTTPS$ 
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Lista czytelnicza 
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Korzystamy 
z WordPressa 
i tworzymy 


własne strony 


W tym rozdziale poznamy bardzo rozbudowane narzędzie 

- WordPress — i dowiemy się, jakie są jego możliwości 

w zakresie tworzenia witryn internetowych. Dzięki lokalnej 
instalacji całego środowiska będziemy mogli testować różne 
rozwiązania, nie ponosząc żadnych kosztów 


Lokalny serwer 


darza się, że osoby, które chcą nauczyć 
się tworzyć strony internetowe lub apli- 
kacje webowe, zaczynają od wykupienia do- 
meny, hostingu i innych dodatkowych usług. 
To trochę ryzykowne, bo jeśli stracą zainte- 


resowanie nauką, opłaty i tak będą musiały 
regularnie wnosić - koszty ponosi się, nawet 
jeżeli strona nie działa całkowicie poprawnie 
lub nie jest skończona. Dlatego warto rozwa- 
żyć na początek tworzenie stron na serwerze 


ę " Ą 
0 Kim jesteśmy? 


sleepconcept.pl - strona oparta na 
WordPressie, dobry przykład spójnej wizualizacji 
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Oferta kształcenia 


Ń Finanse i 
naszej Uczelni 


Rachunkowość 
Administracja 


Europeistyka 
arządzani 


sweiz.pl - przykład strony uczelni wyższej 
utworzonej za pomocą WordPressa 
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lokalnym. Funkcję takiego serwera może peł- 
nić po prostu nasz komputer. 

Serwer to urządzenie, które jest w stanie udo- 
stępniać usługi na potrzeby innych kompute- 
rów lub programów. Uruchomienie serwera 
na laptopie lub komputerze stacjonarnym jest 
bardzo częstym rozwiązaniem i świetnie się 
sprawdza do nauki. Największą zaletą posta- 
wienia własnego serwera lokalnie jest moż- 
liwość testowania stron internetowych bez 
konieczności umieszczania ich w sieci, a tym 
samym ponoszenia jakichkolwiek opłat. 
Oto kilka argumentów przemawiających za 
własnym serwerem na witryny WWW: 

m Możliwość testowania stron 

Podczas pracy z własnym serwerem mo- 
żemy sami tworzyć stronę internetową od 
podstaw. Nie musi być ona opublikowana 
na naszej domenie i możemy ją dopracować, 
zanim umieścimy ją w sieci. Mamy więc do- 
wolnie dużo czasu, aby zająć się wszystkimi 
szczegółami. 

z Edytowanie działających stron 

Często zdarza się, że trzeba dokonać zmian 
na stronie WWW lub w aplikacji sieciowej. 
Powodem może być rozbudowa lub usunię- 
cie jakichś elementów. Lokalny serwer po- 
zwala na stworzenie środowiska testowego. 
Podczas gdy tak zwane środowisko produk- 
cyjne będzie aktywne i dostępne w sieci 
dla użytkowników, my - offline - możemy 
dokonać wszelkich potrzebnych zmian, a na- 
stępnie podmienić pliki na serwerze umiesz- 
czonym w sieci. 


MINUSY SERWERA LOKALNEGO 


Serwer lokalny na laptopie czy pececie 
sprawdza się do nauki i eksperymento- 
wania, ale nie nadaje się do hostowania 
profesjonalnej strony internetowej. Takie 
urządzenie musiałoby działać bez przerwy 
całą dobę, a dodatkowo, jeśli nasza strona 
miałaby dużo odwiedzających, mogłoby 


się okazać, że nie będzie odpowiednio 
szybko ładowana lub nawet zostanie 
zawieszony serwer przez zbyt duży ruch. 
Jeśli chcielibyśmy kupić i złożyć serwer 
z prawdziwego zdarzenia, musielibyśmy 
wydać bardzo dużo pieniędzy, co jest 
całkowicie nieopłacalne - znacznie lepiej 
skorzystać z dostępnych hostingów online. 


z Wygodne kopie zapasowe 

Każda zmiana na stronie internetowej po- 
winna być poprzedzona wykonaniem kopii 
zapasowej. Firmy hostingowe oferują takie 
usługi często za dodatkową opłatą. W przy- 
padku własnego lokalnego serwera możemy 
wykonać kopie zapasowe ręcznie, a następ- 
nie sprawdzić lokalnie, czy kopia została po- 
prawnie utworzona, co jest bardzo ważne. 
Gdyby pliki kopii były tworzone niepopraw- 
nie, w przypadku awarii nie moglibyśmy 
przywrócić naszej strony. 

m Sprawdzanie nowych rozwiązań 

W przypadku WordPressa, jak również in- 
nych systemów CMS, mamy możliwość in- 
stalowania wtyczek, które mogą znacząco 


-« > : sz 


albertzawada.com - strona znanego fotografa 
utworzona w WordPressie. Takie strony są dobrym 
rozwiązaniem dla freelancerów 


e Fa) + * Pufy dla dzieci 
Orignal (2) 
a = 


bini.co/pl - przykład sklepu internetowego 
utworzonego w WordPressie 
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korzystamy z WordPressa i tworzymy własne strony 


rozszerzać funkcjonalność naszej strony lub 
zmieniać jej wygląd. Niestety, zdarza się, że 
dodatek, który na stronie autora prezentuje 
się imponująco, po zainstalowaniu na naszej 
witrynie nie działa lub powoduje błędy. Ser- 


wer lokalny to dobre rozwiązanie do testo- 
wania różnego typu nowości, gdyż zmiany 
wprowadzane offline nie mają znaczenia dla 
użytkowników, a my możemy eksperymen- 
tować i rozwijać naszą witrynę. 


WordPress na własnym komputerze 


tej części rozdziału zobaczymy, jak 

uruchomić lokalnie serwer z Word- 
Pressem [MIHAHAEH). Możemy wszystko 
wykonywać od podstaw sami, co jest jed- 
nak wskazane dla bardziej zaawansowanych 
użytkowników. W przypadku użytkowników 
początkujących zalecane jest skorzystanie 
z gotowego oprogramowania, jak na przy- 
kład XAMPP MDEUAEHX). 


Instalujemy XAMPP 

XAMPP to zestaw oprogramowania, 

który pozwala na uruchamianie lokal- 

nie stron internetowych. Składa się na 
niego oprogramowanie Apache, phpMyAd- 
min, baza danych MariaDB, PHP oraz Perl. 
Program doskonale działa w środowisku 
Windows. Możemy go zainstalować z płyty 
dołączonej do książki lub ze strony apache- 
friends.org/index.html ćw tym wypadku 
na stronie klikamy na kafelek z logo Win- 
dows EJ w celu pobrania instalatora). 


Po uruchomieniu instalatora pojawi się in- 
formacja o możliwych problemach z opro- 


E) XAMPP Apache + I 


What is XAMPP? 
XAMPP is the most popular PHP development 


environment 
XAMPP is a completeły free, easy to install Apache distnbution 
comainng MariaDB, PHP, and Perl XAMPP open source 


package has been set up to be incredibły easy to install and to 


usę 


Download Sg X*MPP for Windows 
k here tor other version 6 (PHP80£ 
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gramowaniem antywirusowym - wyłączamy 
osłony na czas instalacji i klikamy na Yes. 


Question x 
It seems you have an antivirus running. In some cases, this may slow down or 
interfere the installation of the software. Plesse visit the following ink to lesrn 
more about this. 


http://apachefriendx.orq/en/faq-1ampp-windows.htmifantvirus 


Continue with installation? 


No 


Następnie pojawi się ostrzeżenie doty- 

czące uprawnień systemu Windows. 
Nie należy instalować XAMPP na partycji © 
- jeśli mamy taką możliwość, lepiej zainsta- 
lować ten program na innym dysku. Jeżeli 
nie mamy takiej możliwości, trzeba dezak- 
tywować UAC, czyli zabezpieczenia systemu 
Windows, co nie jest zalecane. 


[ED waming x 


Important! Because an activated User Account Control (UAC) on your system 
some functions of XAMPP are possibły restricted. With UAC please avoid to 
install XAMPP to CMProgram Files (missing write permisssions). Or desctivate 
UAC with msconfig after this setup. 


L= _] 


Następnie rozpoczynamy instalację - 
zaznaczamy wszystkie komponenty do 
zainstalowania i klikamy na Next. 


E setup - x 


Select the components you want to instal; cieze the components you do not want to nstal. Chek 
Next when you are ready to contnue. 


[4] Serve Cx on a component to get a detałed desoijpion 


Select Components 


MySQL 
FileZilła FTP Server 

Mercury Mail Server 
Tomcat 


B rr 
AZAKZAAEACE 


P 

Jram | anquage 
phpMyAdmin 
kl Webalizer 

EQ Fake Sendmail 


< Bach Next > 
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Wskazujemy lokalizację docelową insta- 
lacji i klikamy na Next. 


[D setup z x 


Installation fokier E 


Piesze, choose a fokder to instal XAMPP 
Select a fokler D:karopl ne 


W kolejnym oknie wybieramy język 

angielski, usuwamy zaznaczenie przy 
opcji Learn more about Bitnami for XAMPP 
i klikamy na Next. Po przejściu do kolejnego 
okna rozpocznie się instalacja, która trwa 
dość długo. W trakcie instalacji wyrażamy 
zgodę na dostęp do sieci dla serwera Apache. 


ŚP Alert funkcji Zabezpieczenia Windows x 


Zapora Windows Defender zablokowała niektóre funkcje programu Apache HTTP Server we 
wszystioch zecach pubkcznych i prywatnych. 


" Nazwa; Apadre HTTP Server 
Wydawca: Apadre Software Foundaten 
Śóeka: D: pamppypache'pinihttpd,exe 


Zerwól programem Apache HTTP Server na połączenia w tych seriach: 
Esc prywatne, taloe jek seo domowe kb firmowe 


EQ seo pubłczne, taloe jek w portach lotniczych I kamiamisch (niezalecane, 
porieważ take sie na ogół mażą stare zabezyweczeria lub rie mażą kh wcale). 


r wi m3 na dost g2 


Zezwalśj na dostęp LU 


Po zakończeniu instalacji zaznaczamy 
opcję Do you want to start the Control 
Panel now? i klikamy na Finish. 


Completing the XAMPP Setup Wizard 


Setup has finished installing XAMPP on your computer. 
[MI Do you want to start the Control Panel now? 


Pierwsze kroki i sprawdzenie 

instalacji 

Po zainstalowaniu XAMPP musimy pa- 

miętać, że serwer tak naprawdę udo- 
stępnia usługi dla użytkowników. Musimy 
go uruchomić oraz inne dodatkowe usługi. 
Na początek będzie potrzebny nam tylko 
serwer Apache oraz baza danych MySQL 
(MariaDB). Uruchamianie tych komponen- 
tów najwygodniej przeprowadzić w panelu 
kontrolnym XAMPP. 


Panel kontrolny po raz pierwszy urucho- 
mimy, kończąc instalację, później wystar- 
czy wpisać frazę XAMPP Control Panel 
w pole wyszukiwania Windows i uruchomić 
aplikację. 


XAMPP Control Panel 


Aplikacja 


Li Otwórz 


TQ Uruchom jako administrator 


W panelu kontrolnym XAMPP klikamy na 
Start w wierszach Apache oraz MySQL. 


XAMPP Control Panel v3.3.0 | Compiled: Apr 6th 2021 | 


XAMPP Control Panel v3.3.0 


Modules 


All prarequisites found 
inttiakzing Modules 

Starting Check-Timer 

Control Panel Ready 

Altempiing to start Apache app. 
Stslus change detected. runnmg 
19:09.( Attempiing lo start MySQL spp 
19.09.07 [mysql] Status change detected. running 


Sorice Module — PID(s) Port(s) Actions 
X Apache a 80.443 | Stp Amin Config Lega 
x HySOL 16450 a06 [N5eg_] | am Config Lego 
X  rezm Sur || mam | conty || Lega 

Start sm | Config | Leg 
Sun || AS) | confg || Lege 


z. do tej pory wszystkie kroki wyko- 
naliśmy poprawnie, uruchamiamy prze- 
glądarkę internetową, w pasku adresowym 
wpisujemy localhost i wciskamy (Gre). Jeśli 
pojawi się strona z informacjami o XAMPP, 
serwer działa poprawnie. 


[EJ] XAMPP apacne p aleDE + PHP + 
er 


Welcome to XAMPP for Windows 8.0.6 


35 na tym etapie mamy aktywny serwer 
PHP, który działa lokalnie i wyświetla 
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stronę WWW. Jeśli zamierzamy wyświetlać 
naszą stronę, musimy wykonać znacznie wię- 
cej kroków. 

Uwaga! XAMPP Control Panel uruchamiamy 
zawsze jako administrator. Jeżeli po urucho- 
mieniu usługi MySQL nie pojawi się port, 
wyłączamy program i uruchamiamy go po- 
nownie jako administrator. 


Tworzymy nową bazę danych 
Jeśli zamierzamy korzystać z WordPres- 
Sa w środowisku lokalnym, musimy 
utworzyć nową bazę danych, która 
będzie zawierać wszystkie informacje naszej 
strony internetowej - komentarze, loginy, 
hasła, posty, ustawienia itp. Domyślną bazą 
dla XAMPP jest MariaDB. Uruchomiliśmy 
już moduł bazy w panelu kontrolnym, teraz 
możemy przejść do tworzenia nowej bazy. 


Bazę w XAMPP zakłada się z panelu php- 
MyAdmin EJ - w przeglądarce wpisuje- 


Hlserwer 127.0.0.1 » OBaza danych: dbforwordpress 


© Struktura 


LJ root 1 


J root 


[) Zaznacz wszystko Z zaznaczonymi. 


E; Eksport 
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my adres localhost/phpmyadmin i wcis- 
kamy (zie 


Teraz na górnym pas- 
ku klikamy na Bazy 
danych. 


I Serwer 127.0.0.1. 


Tworzymy nową bazę danych, na przy- 

kład dbforwordpress, wybieramy meto- 
dę porównywania napisów utf8_general_ci 
i klikamy na Utwórz. 


Bazy danych 


4 Utwórz bazę danych 4% 


dbiorwordpresś utf0_general_ci *| | Utwórz 


Baza danych + Metoda porównywania napisów. Działanie 


EJ SQL 4 Szukaj 4 Zapytanie =) Eksport (2 Import 4* Operacje ** Uprawnienia 4<$ 
2, Użytkownicy mają dostęp do "dbforwordpress" 
Nazwa użytkownika Nazwa hosta Typ Uprawnienia 
0 root 127.0.0.1 ogólny ALL PRIVILEGES 


localhost 


Teraz dodamy użytkownika naszej bazy 

- klikamy na górnym pasku na zakładkę 
Uprawnienia, a następnie na Dodaj konto 
użytkownika [-] w polu Nowy. 


ogólny ALL PRIVILEGES 


ogólny ALL PRIVILEGE5 


4 mrmienia 


Replkmjp 4 Zubome IE Kadunia wkóm 4 Machorimy fp Wyki 


"ma 9 Prze - 
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Bary danych [J SOŁ 6 Status 


+ Komaużytkowników 24 Eksport (© knpot 4 Ustawienia 


CREATE USER "dbforwsrópreri_user"f' localhost" TBENTZYJID VIA wysąl_native_password USING ****" JORNT ALL PAZVILIGES 4 *.* 
MAX_CONMECTIGN5_PIR_MOUR © 7AX_UPOATES_PYR_NOUR © MAK_USER_COWNECTIOKS 0;GRANT ALL PRIVILIGES OW "abforvordpreśs 


Edytą w ró | Edytuj ] [Uowócz bed PHP] 


| Replikacja © Zmieme MH Kodowania znaków 


4 Mechanizmy Wtyczki 


19 "dbforwarżęress_user"$' localhost" REQUIRE NONE ITW GANT OPTION MAX GULATES_PIR_JOUR 0 
* 10 "dbforwordęreni_osec"(' loceihost'; 


Podajemy nazwę użytkownika, host, ha- 

sło, zaznaczamy opcję Zaznacz wszystko 
w polu Globalne uprawnienia i klikamy na 
Wykonaj u dołu strony. 


Po utworzeniu pojawi się wpis (M, 

który zawiera pełną instrukcję tego, co 
„wyklikaliśmy” oraz wpisaliśmy w formu- 
larzu. 


Lokalna instalacja WordPressa 
Po uruchomieniu serwera WWW istwo- 
rzeniu bazy danych z użytkownikiem 
pobieramy WordPressa z oficjalnej stro- 
ny - wordpress.org/download (możemy go 
też zainstalować z płyty dołączonej do książki). 


Bezcenne, i bezpłatne 


Po pobraniu wypakowujemy WordPressa 
z archiwum. 


Teraz przechodzimy do lokalizacji, w któ- 
rej zainstalowaliśmy XAMPP, i wchodzi- 
my do folderu htdocs. 


Dysk lokalny (©:) > xampp > htdocs > 


k nm 


Nazwa Data modyfikacji 


a dashboard 

|| img 

| webalizer 

| xampp 

© applications html 
6. bitnami.csc 
favicanicu 

[) index.php 


Usuwamy z niego wszystkie pliki i fol- 
dery. Tworzymy nowy folder o nazwie 
na przykład blog_wp i wklejamy do niego 


I r"ISerwer: 127.0.0.1 


Bazy danych ZJ SQL ($ Status = Kontaużytkowników = Ek: 
Dodaj konto użytkownika 
Dane użytkownika 
Nazwa użytkownika: Użyj pola tekstowegi w | dbforwordpress_user (7) 
Nazwa hosta: Użyj pola tekstowegi w localhost G 
Hasło. Użyj pola tekstowegi w | "="="=e*+ Q | Strength: | 
Powtórz  |peeenanea Q 
Authentication plugin Natywne uwierzytelnianie MySQL + 
Wygeneruj hasło. Generuj 


Baza danych konta użytkownika 


U Utwórz bazę danych z taką samą nazwą I przyznaj wszystkie uprawnienia 
U Przyznaj wszystkie uprawienia do baz danych o nazwach pasujących do maski (nazw 


Przyznaj wszystkie uprawnienia do bazy danych dbforwordpress. 


Globalne uprawnienia Zaznacz wszystko 


Uwsga: Uprawnienia MySGL zą Oznaczone w języka GNglzkM 
Dane 


Struktura Administracja 


| ROEE 


PIS s| wordpress 


Udostępnianie Widok 


= = 4 |» tentomputer > Dyskletalny(D:) » Download > wordpeesy60-pl.PL > wordpress 


% RB Korzystamy : Wordprest i tworzymy udar % Dsta m 


Nazwa 


© Nestcdoud 14.06 
35 Oropbox 
8 OneDrive 
licensetrt uma 
8 Ten komputer © rudnehktni 
8 Dokumenty ] wpractwatephp 
„b Muzyka | wp-blog-header.php 
5 Obiekty JD wp-<omments-post.php 10112 
© Obrazy ] wp-ecafig-zampie.php 14.12. 
+4 Pobane wp-cton php a 
HB Pulpit wpelinks=cpml.php 15.03.2 
g ] wp-leadphp 12.04 
BB video ] wprlogin.php M. 
© Dysk totalny (C:) wpmalęhp 
— Dysk kokalny (D:) ] wp-settingr.php 12042 
= Dysk lokalny (£:) wp-zignup php 1 
— Dysklekalny (F) wprtrackback.php " 
xmirpe.php a 


) Virtual CloneDrive (6) 
) Vietuai CioneOrtve (49 


Oamnia aka (3 
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zawartość całego wypakowanego folderu 
wordpress z pobranego archiwum. 


Dysk lokalny (D:) > xampp > htdocs > blog,wp > 


Nazwa Data modyfikacji 


5) wp-admin 
1) wpreontent 
(| wp-includes 

|] index.php 

| Kcensetxt 
© readme.htmi 29.12.2020 21:14 
wp-aclivate.php 1.01.2021 02-37 


Teraz w przeglądarce wpisujemy local- 
host/blog_wp, aby rozpocząć proces in- 
stalacji WordPressa. W pierwszym oknie wy- 
bieramy język Polski i klikamy na Kontynuuj. 


phempió X Qw x + 


ez 


maról 
Bahasa Melayu 


W kolejnym oknie klikamy na Zaczy- 
najmy i rozpoczynamy konfigurowanie 
połączenia z bazą danych. Podajemy nazwę 


bazy, użytkownika oraz hasło, wskazujemy 
adres, zostawiamy domyślny prefiks i klika- 
my na Wyślij. 


G6*' pojawi się nam taka [7] informacja, 
oznacza to, że do tej pory poprawnie 
wykonaliśmy wszystkie kroki. Klikamy na 


Uruchom instalację. 


Teraz podajemy tytuł witryny, nazwę 

użytkownika, jego hasło, adres e-mail, 
zaznaczamy opcję Proś wyszukiwarki o nie- 
indeksowanie tej witryny i klikamy na Za- 
instaluj WordPressa. Proces instalacji trwa 
około pięciu minut. 


Wymagane informacje 
Tytul wiaryny Testoa 
Nazwa użytkownika 
Hasło 

soenacze + 

RO 

| średnie 

Ważne: Hasło będzie pożrz p 
Twój e-mail ha Rakom 4. «w 

16 

Widoczność dla Q Prot wyszutować © nęendęk 
wyszukiwarek 


Po zakończeniu instalacji klikamy na 
Zaloguj się. 


Sukces! 


Nazwa użytkownika | test 


Haslo Wybrane przez Crebve hasło. 
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0 4 Testowa 


GB Kokpit 


Strona główna 


"A 


wpisy 
Media 
Strony 
Disqus 
Wygląd 


4 Wtyczki 60 


g Dsqus 


upóraftPius 


Witaj w WordPressie! 


Dowiedz się więcej na temat wersji 6.0 


Twórz rozbudowane treści z użyciem 


bloków i wzorców 


Aktualizacje | 


B 


Alteakzcje 6 


Wtyczki 
Zaktualizuj 


c 
wtyczki| |) 


Aktualizacje WordPressa 


Zrób łatwą aktualizację z UpdraftPlus 
w 


Aktualna wersja: 60 


Zainstalowana jest najnowsza wersja WordPressa. B 


Wtyczki (7) 


ca Artynee Boć 
s" 
paz) 


JpedrattFun 


WP-Opti 
Opinia 


JAVASCRIPT, HTML, CSS, PHP, WORDPRESS 33 


34 


adam1l3zajacigmail.com 


korzystamy z WordPressa i tworzymy własne strony 


Więcej 


cus 


Podajemy dane logowania ipo- | „| 
nownie klikamy na Zaloguj się. | i... 


Po zalogowaniu pojawi się 
panel administratora Word- 


1 


Pressa dla naszej strony. To właśnie 
s | zjego poziomu będziemy mogli za- 
rządzać naszą stroną. Domyślnym 
motywem po instalacji jest Twenty 
Twenty-One. 


Edytujemy domyślną stronę 


o wykonaniu powyższych instrukcji bę- 

dziemy mieć działający lokalny serwer 
z bazą danych oraz aktualnego WordPressa 
z gotową domyślną witryną. Możemy teraz 
przejść do zmieniania motywu oraz edyto- 
wania samej strony lokalnie. 


Zmiana motywu 
Logujemy się do panelu administratora 
naszej strony - strona logowania to local- 
host/[folder_dla_wordpress|/wp-login. 
php. Następnie klikamy na Spersonalizuj 
swoją witrynę. 


Witaj w WordPressie! 


Kilka najważniejszych odnośników. 


Zaczynamy 


lub wybierz oływ 
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Teraz po lewej stronie klikamy na Zmień 
przy polu Aktualnie używany motyw. 


x Opublikuj © 


Twenty Twenty-One za | 


Następnie klikamy na Motywy Word- 

Press.org i z okna po prawej stronie 
wybieramy motyw odpowiedni dla naszej 
witryny EJ. 


Po wybraniu motywu klikamy na Akty- 
wuj i opublikuj EJ. 


Nowy motyw będzie teraz domyślny dla 
naszej witryny. 
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x 

< 

Zainstalowane motywy 

Motywy WordPress.org [.) 


Dodajemy nowe strony 
lub wpisy 
Po zalogowaniu do panelu 
administratora klikamy na 
Dodaj strony lub Dodaj wpis. 


Następne kroki 
K Edytuj stronę startową 


Doadaj strony 


Dodaj wpii 


+ 
K 
jo] 


Następnie tworzymy nasz 
wpis, korzystając z bloków. 
W celu dodania kolejnego blo- 
ku klikamy na plus [FH u dołu 
wpisu i wybieramy rodzaj blo- 


ku. 


Po wprowadzeniu wszyst- 
kich treści klikamy w gór- 
nym prawym rogu na Opubli- 


kuj H. 


W celu podejrzenia opubli- 
kowanej strony klikamy na 
Zobacz stronę [J. 


Podgląd motyw 


Blogrid 


Wydanie Premium 


Tożsamość witryny 


Wycieczka do Parvża 


cen 
jzapisz szkic Zobacz Eql 10) 3 


Strona Blok 


x 


Status i dostępność 


wyświetlanie Publiczne 


opublikowany. 


Co dalej? 


Strona adresy 


httpy//localnost/blog_wp/wycieczka-d. 


Kopruj odnośruk 


ne 
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Dodajemy wtyczki do naszego 


WordPressa 


M ożliwości instalacji wtyczek mamy kilka 
w zależności od tego, w jakim środowi- 
sku pracujemy. Jeśli korzystamy z lokalnego 
środowiska, które skonfigurowaliśmy we- 
dług opisu powyżej - najprościej przekopio- 
wać pobrany plik z wtyczką do odpowied- 
niego katalogu lokalnie na naszym dysku. 
Poznajmy kilka sposobów, które mogą być 
przydatne w zależności od konfiguracji na- 
szego serwera. 


Instalacja automatyczna w panelu 
administratora 
Jest to jedna z najprostszych form instalacji 
wtyczek w WordPressie. Ogranicza nas nie- 
co, gdyż możemy wybrać do zainstalowania 
jedynie oficjalne dostępne wtyczki - jednak 
dla początkujących jest to najbardziej zaleca- 
na i najbezpieczniejsza forma instalacji. 
Logujemy się do pa- Komentarze 
nelu administratora 
naszej witryny WordPress. 
Następnie w menu po le- 
wej stronie klikamy na [AŚ 
Wtyczki. 


Wygląd 


Uzytkownicy 


4*_ Narzędzia 


Teraz po prawej stronie klikamy w górnej 
części ekranu na Dodaj nową. 


Śł Testowa © 4 


Wtyczki | podaj nową ] 


+ Wpisy | 


%% Kokpit 


This theme recommend the following plugin: Superb 


Begin installinq pługin | Dtsmiss this notice 
wszystkie (2) | wyłączone (2) | Dostępne aktualizacje (1 
Komentarze 
Działania masowe w Zastosi 
> Wygląd 
Wtyczka Opis 


je Wtyczki 1 
Akismet antyspam 
yłacz_ Lieuń strony 


Używany przez miliony, AK] 


Zainstalowane wtyczki 


konfiguracji Akisme| 


Korzystając z listy wyróżnionych wty- 
czek lub pola wyszukiwania odnajdu- 
jemy tę, która będzie dla nas przydatna. 


Jedną z ciekawszych wtyczek jest Broken 


Link Checker EJ, która sprawdza, czy lin- 
ki umieszczone na naszych stronach są 
aktywne. 


Po kliknięciu na nazwę wtyczki mo- 

żemy poznać szczegółowe informa- 
cje na jej temat [-], następnie klikamy na 
Zainstaluj. 


36 


Dodaj wtyczki [wro == 


JAVASCRIPT, HTML, CSS, PHP, WORDPRESS 


adam1l3zajacigmail.com 


Dysk lokalny (D:) » xampp > htdoce > blogwp > wp-content > pługins JJ 


Nazwa Data modyfikacji L7 


skismet 
broken-link=checker 1 Fold 
<ontact-form-7 26.07.2021 14:14 Folde 
gallery- plugin j 
hello.php 1 

index.php 


> wygląd 


Wtyczka Opis 


K Wtyzk : B 


Zainstalowane wtyczki 


Akismet antyspam 


włącz 


wersja 4,1.9 | Autor; Ai 
>» Dysklokalny (D:) » xampp > htdocs > bloq_wp 

dytor wt 
owa wersja „Akismet antyspar| 


Nazwa Dataj z 
Ś Użytkownicy 


wp-admin 


wp content $ Narzędzia ogp 

: 1.11.15 | Autor: 
wp-ineludes 26 Bł Ustawienia |a 
„htaccess 


index.php o 


Wtyczki 
B, 


Broken Link Checker 
© wpmude 


Część wtyczek dostępna jest tylko na stro- 
nach twórców, czasem też w oficjalnej wy- 
szukiwarce nie będziemy w stanie znaleźć 
starszych wersji wtyczek, które są kompaty- 
bilne z naszą wersją WordPressa, dlatego też 
RETE warto umieć zainstalować wtyczki ręcznie. 


Dod aj wtyczki wyślij wtyczkę na serwer 


ony Logujemy się do panelu administratora 
WordPressa, klikamy na Wtyczki, a na- 

stępnie na Dodaj nową. Po prawej stronie 

= klikamy na Wyślij wtyczkę na serwer. 
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Jeżeli posiadasz wtyczkę w formacie „zip. możesz zainstalować lub aktualizować ją poprzez wysłanie jej na serwer za pośrednictwem tej strony. 


Wybierz plik | Nie wybrano pliku 


n 


2 Teraz klikamy na Wybierz plik [£], wska: Uruchamiamy wtyczki 
zujemy archiwum ZIP z wtyczką na na- Po zainstalowaniu wtyczki będą dostępne 
szym dysku i klikamy na Otwórz. w panelu zarządzania, jednak jeśli chcemy 
z nich korzystać na naszej stronie, musimy 
Po załadowaniu pliku klikamy na je włączyć. 


Zainstaluj. 
Po zainstalowaniu wtyczki w zakładce 
(wybierz pik ) gallery-plugin467.2ip | Zainstaluj Wtyczki, Zainstalowane wtyczki klika- 
my na Włącz przy wtyczce, która ma być 
aktywowana. 
Po chwili wtyczka zostanie zainstalowa- 
na i będzie gotowa do włączenia |B I Broken Link Checker Sprawdza Twój blog pod kątem niedziałających 
Włącz | Usuń wersja 1.11.15 | Autor: WPMU DEV | Szczegó 
Instalacja wtyczki z wysłanego na serwer pliku: gallery- 
plugin.4.6.7.zip , = 
Rozpakowywanie paczki. W zależności od (Broken Link Checker 


wtyczki konfigura- Wyłącz Ustawienia 


cja [7] może przebiegać 
różnie, zwykle należy kliknąć na Ustawienia. 


Opcje pluginu Link Checker |C| 


This theme recommend the tollowiną plugin: Superb Hefoer 


Begin installing.plugin | Diemisz this notice 


Ogólne 


Stan 
Pokaż informacje typy debug 


Sprawdź każdy link 


ko, jak to możówe. 
Powiadomienia na E-mail ach 
Adres e-mail do powiadomień n 
tu te. a aWeNEJO tamienza — Ogólne. 
Control external links en in a new tab. and the: noopener and U p 


Linki-dodatki 
Sugestie W) Sugeruj zamienniki do błędnych inków 
Ostrzeżenia w) Pokaz niepewne lub drobne problemy ja kodzone 
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Rozpoczynamy 

konfigurację wtycz- 
ki do naszych potrzeb. 
W przypadku wtyczki 
do sprawdzania nieak- 
tywnych linków, jeśli na- 
sza witryna nie jest zbyt 
rozbudowana, możemy 
ustalić czas pomiędzy 
kolejnymi sprawdzenia- 
mi nawet na 24 godzi- 
ny. Dodatkowo w zakład- 
kach Szukasz linków 


Typy linków 


Które linki sprawdzać 


oraz Które linki spraw- 
dzać możemy zdefiniować konkretne obiek- 
ty naszej strony, jakie mają być sprawdzane, 


Polecane wtyczki 


oznajmy kilka wtyczek przydatnych dla 
każdego, kto tworzy swoją stronę, wy- 
korzystując WordPressa. 


z Broken Link Checker - pozwala spraw- 
dzić, czy wszystkie linki na naszej stronie 
działają EJ. Dzięki temu, gdy jakiś link wy- 
gaśnie, zostaniemy powiadomieni i będziemy 
mogli go podmienić, a użytkownicy nie od- 
czują problemu związanego z niedziałającymi 
linkami. Dostęp do listy linków uzyskamy, 


na przykład komentarze czy wpisy, oraz ro- 
dzaje linków do weryfikacji. 


klikając w panelu administratora na Narzę- 
dzia, Niedziałające linki po aktywowaniu 
wtyczki. 


z Disqus Conditional Load - po zainstalo- 
waniu i aktywowaniu ta wtyczka podmienia 
domyślny system komentarzy WordPressa. 
Disqus jest usługą zewnętrzną, która ułatwia 
komentowanie na stronach internetowych. 
Bardzo dużą zaletą tego systemu komenta- 
rzy jest możliwość posiadania konta, które 


Wyśryte linki (9) 


wszystiów 
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umożliwia komentowanie |zcommens  Josisuys © oc! amc: - 
wielu stron internetowych |os=»w« 7% EET Bart by Boni 


jednym profilem. Dzięki temu 
użytkownicy, którzy mają już 

zarejestrowane konto, będą |7zg sosume cm +0* 

mogli bez problemu komen- BBS 2 
tować na naszej stronie, ainni Duis aute irure dołor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occzecat 


cupódatat noa prośdent, sunt in calpa qui officia deserunt mollit anim id est laborum. 


użytkownicy będą mogli ich ta 


rozpoznać po profilu - spra- oe James [IJ 10 

wia to, że komentowanie staje r b oaz rio 
się mniej anonimowe i moż- ROPA 

na nawiązać konstruktywne |gawaw Buona GB ową paweypatey SEEE 


dyskusje. 


Comment and Moderation Settings 


Po zainstalowaniu i włączeniu wtyczki 
przechodzimy do jej ustawień i klikamy cola dw 
na finish Disqus setup. 


Disqus Conditional Load bylo: smestvi106) 


t work, uniess you fipich Disquś setu 


| Disqus Conditional Load val ni 


ŚŁ Settings | 25 Pro £lnto 


How to Load Disqus 


This feature will let 


and no lazy loa 


Pepe tede ża mi nam odpowiada - zawsze możemy go 
IM Disqus comments are r zmienić. 


requmred. Please note tha 


Następnie klika- | DISGQUS m Antispam Bee - pozwala na blokowanie 
my na No i two- spamu w komentarzach. Jeśli nie używa- 
rzymy konto Disqus. | "*" "e" | - my Disqus, warto skorzystać z tej wtyczki 
Automatic Installation zamiast standardowej Akismet, która nie 
Podczas konfigu- | mss osąus on ycu ste usrg s sej _ SprAWdZA się tak dobrze. Filtrowanie spamu 
racji wybieramy, możemy dostosowywać w ustawieniach. Pa- 
jaki typ administro- GE zowretwyzi miętajmy, że wszelkie zmiany zatwierdzamy, 
wania komentarza- | -—— klikając na Save Changes. 


Antispam Bee 


Antispam filter Y Advanced More 2 
Filter in the exacution order thec antispam too vańcu< options » 
7 Mark as spam. do not delete Generate statistics a5 a dashboard widget 
Keep the spam in my blog Dadły updates of spam detection rate 
$pam-Notification by email $pam counter on the dachboard 
19e. Piez Notify admir mail sbout incom om amount of trhed spam comment 
this opt 
Do not save the spam reason Do not check trackbacks / pingbacks 
am reason as a table cołu n the spam *%0 spam check for link notifcat 
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Optymalizujemy naszą stronę 


P onieważ po zainstalowaniu i aktywowa- 
niu wtyczek nasza strona może przestać 
płynnie się wyświetlać, musimy ciągle dbać 
o jej optymalizację. Dodatkowo jeśli dodamy 
zbyt wysokiej jakości zdjęcia bezpośrednio 
do naszej strony, każdy odwiedzający będzie 
musiał je załadować, a to znacząco obciąży 
serwer, na którym jest hostowana, i sprawi, 
że odwiedzający będą musieli dość długo 
czekać na załadowanie strony. 

Im większa i bardziej rozbudowana strona, 
tym więcej problemów z jej optymalizacją, 
ponieważ później pojawiają się problemy 
ze zbyt rozbudowaną bazą danych, linkami 
i innymi zmiennymi, o których musimy pa- 
miętać. Dlatego zaleca się, by już od począt- 
ku tworzenia strony dbać o jej przejrzystość 
oraz aby nie zaśmiecać zbędnymi wtyczka- 
mi i plikami katalogu głównego. Dodatkowo 
warto korzystać z wtyczki WP-Optimize, 
która służy głównie do poprawy wydajno- 
Ści naszej strony i umożliwia testowanie na 
przykład czasu ładowania. 


Instalujemy WP-Optimize 
Instalujemy wtyczkę WP-Optimize - 
Cache, Clean, Compress w panelu 

administratora naszej strony. 


WP-Optimize — Cache, zart 


O Cieen, Compreśs 
m 


WPOptimize 


2 Włączamy wtyczkę po zainstalowaniu. 


(0) wP-Optimize - Clean. Compress. Cache 


włącz Usuń 


3 Następnie klikamy na Optimize. 


(|) WP-Oplimize - Clean, Cormpress, Cache 
Optimize Settings Premium Wyłącz 


Optymalizujemy bazę danych 
Po lewej stronie w pa- 
nelu administratora 

klikamy na WP-Optimize, 

a potem klikamy na Data- 

base. 


4, SpeedGuard 


ŚS wr-Optmze 4 


Datahase 


Następnie klikamy na Run all selected 
optimizations. 


<= WP-Optimize 3.1.11 
RZ 


Optimizatłons _ Tables _ Settings 
Status 


o scheduled opiimszaton 


cleaning disabled 
Not keeping recent data 
Not keeping any revisions 


Optimizations 


w) Optinsize database tablos 


4) Cleanall post revisions 


Y/  Cleanall auto-draft posts 


w)  Cloanall trashed posts 


w Remove spam and trashed comments 


W trakcie tego procesu między innymi 
zostaną usunięte wszystkie posty prze- 
niesione do kosza i zapisane wersje robocze 
stron, które już są opublikowane, zostanie 
też zoptymalizowana cała baza danych. Jeśli 
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często, tworząc nowe 
posty, zapisujemy je 
w formie roboczej 


Optimizations Tables Setlings 


lub chcemy móc wra- General settings 
cać do poprzednich 
wef: sji postu, musimy Whether manually or on a schedule, these settings apply whenever a relevant optimization is run. 
przejść do zakładki = FEB 
S ttin 5 i zaznacz 2 (U Keep last | e | weeks data 
e - s: aczyc This oplicn wil, where relevani, relaśn dała from the chosen period, and remove ary garhage data before bal period 
opcję Always keep 2 
post revisions. Always keep | 2 |post revisions 
Ins opton wii retam specihed number ot post revisions, and remove otner rewsions. 
W zakładce Set- Take a backup with UpdraftPius before running scheduled optimizations +ofow tnis Ink to install UpdraftPius, to tas] 
tings możemy 
aktywować harmono- 
gram optymalizacji bazy danych i ustalić, aby W polu wtyczki WP-Optimize klikamy 
wykonywał się na przykład raz w tygodniu. na górnym pasku na Obrazki. 


Pamiętajmy, aby kliknąć na Save settings 


Ww celu zachowania wszystkich zmian. Useful [inks Home | UpdraftPius | News | Twitter | Support | Newsletter 


Scheduled clean-up settings dy (= a © 
Baza danych Obrazki Cache  Minify Ustawienia 


Bike control of iean-vpe: Upatade to Premium for a mote. powerful and flexible <chedulet 


Enable scheduled cłean-up and optimization (Beta feature) 


owe OPTYMALIZUJEMY CACHE 


1 Przechodzimy do zakładki ETHIE. 


Weekly w 
(|) Optimize database tables 
(/) Clean all post revisions 
NAP Home | UpdrofiPius | News | Twitter | Support | Newsletter 
(7) Remove trashed posts 
© 
(/) Remove spam and trashed comments Baza danych Obrazki Cache Minity Ustawienia 
f”] Remove unapproved comments 


O) Remove espired trancent opiions Jedyne, co musimy zrobić, to kliknąć 
iE'Enable page caching' 


Page cache Preload Advanced settings Gzip compression 


i j i now to use the cache feature 
Optymalizujemy grafik 8 
Szybko przekonamy się, że nieodpowiednia ER 
grafika to najgorsze, co może być dla czasu GD) mae oe ino 
This 5 all that's needed for cacłung to work WP-Optmize wall automatically 


ładowania strony. Wystarczy, że umieścimy 
na jednej stronie kilka obrazków, które nie 
będą odpowiednio zoptymalizowane, a czas Od tej chwili wtyczka WP-Optimize 
ładowania strony z niecałej sekundy może będzie automatycznie dbała o za- 
wzrosnąć nawet kilkukrotnie. Należy zawsze chowanie strony. Zajmuje to miejsce na 
starać się umieszczać na swojej stronie zdję- NAM EE YJYEWENOWO AMIAOWA 
cia w wysokiej jakości, które jednak niebędą POWANIA SEOWWSAYWEWE KICH 
zajmowały zbyt dużo przestrzeni dyskowej przy kolejnych wizytach. 

i nie będą miały zbyt dużej rozdzielczości. 
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Następnie zaznaczamy dwie opcje do- 
stępne w zakładce Compress images. 


Comypress imaqoc _ Unused images and sizes GEGBEJ | Lazy-load CJ 


$$ Haw to use tne imaqe compression feature 


Note: Currently this feature uses third party services from reśmushit. The performance cf this tree ie| 


BID swtomaticaily compress newły-zdded images © 
GID stow compression meta-box on 2n image's dashboard media page. ©) 
Compression options 


| Pnoeitsze manmum ccenpeesy 
Proeitze retenbon of detad © 


'A BEZ 


Maumum cowpeeywco 


Noł sure what to choose? Bząd owe stele Losy 1 Lossless Mage compiesica" 


7 test image qualży 


| * Show advanced opbons 


W polu Compression options wybieramy 

opcję Custom [Ni ustawiamy suwak na 
środku, aby zachować dobry stosunek jakości 
do wydajności. Jeśli zależy nam na maksymal- 
nej wydajności, wybieramy opcję Prioritize 
retention of detail [-1. 


Wszystkie obrazki, które już są załado- 

wane na naszej witrynie, możemy rów- 
nież poddać kompresji, wystarczy je wybrać 
w polu Uncompressed images. Klikamy na 
Select all, a następnie na Compress the se- 
lected images. 


Uncompressed images 


Select all / Select none 


Mark as alieady twompressed 


Po chwili zostanie wyświetlony raport na 
temat kompresji. Oprócz tego, że nasza 
strona będzie szybciej się ładowała, uzyska- 
my dodatkowe miejsce na pliki na dysku. 
Jest to ważne, jeśli wykupiliśmy ograniczoną 


KORZYSTAMY Z MINIFY 


1 Przechodzimy do zakładki LILY. 


Home | UpdrafiPius | News | Twilter | Support | Newsletter 


db m © |t] 


Baza danych Obrazki Cache Minity Ustawienia 


Jedyne, co musimy zrobić, to akty- 

WOAWELSUKJIEJEnable Minify P>424 
temu wszelkie elementy JavaScriptu 
oraz CSS na naszej stronie będą zopty- 
malizowane. To działanie przynosi świet- 
ne efekty w wypadku większości stron, 
które zawierają tego typu elementy. 
Należy jednak dokładnie zweryfikować, 
czy strona po aktywowaniu tej funkcji 
działa poprawnie. Jeśli zaobserwujemy 
jakieś błędy, należy wyłączyć Minify lub 
usunąć elementy JavaScriptu albo CSS, 
które mogą powodować problemy. 


Minily status Advanced 


JavaScript CSS  Fonts Settings 


€£$ Hor to use the mersty festure 


€55. JavaScript amd HTML minification ts an advanced feature. 
4. wtile erabling it will work just fine for most sites, it might need specific conńg 
f yu enzounier an issue 304 366 Na zur what to do, disable the feature and 


GD) srabio minity 

I thus is tumed on, then the defauft settings are that JavaScnipt and CSS on this websj 
GD »oces rui © 

GID process Javascript files © Settings 


GID Process CSS files © Settings 


przestrzeń serwerową i zaczyna nam brako- 


wać miejsca. 


A total of 1 image(s) were successfully compressed in this iteration. 


Since your compression statistics were last reset, a total of 1 image(s) 
were compressed on this site, saving approximateły 42.08 KB of space 
at an average Of 04 percent per image. 
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Kopia zapasowa i przywracanie 
Jeśli chodzi o dane, nigdy nie należy być 
zbyt ostrożnym. Jest to trafne stwierdzenie 
szczególnie w przypadku stron interneto- 
wych. Nigdy nie wiemy, czy jakiś element 
naszej witryny nie stanie się podatny na 
atak, w wyniku którego zostaną usunięte 
wszystkie dane z naszego serwera. Dlate- 
go też zaleca się wszystkim korzystającym 
z WordPressa i innych systemów CMS, które 
pomagają zarządzać stronami, aby często 
wykonywać kopie zapasowe. 

W przypadku WordPressa mamy kilka moż- 
liwości wykonywania kopii zapasowych. 
Możemy wszystko robić ręcznie, częściowo 
automatycznie z poziomu panelu administra- 
tora i całkowicie automatycznie po wcześ- 
niejszej konfiguracji. 

Pierwsza opcja polega na zalogowaniu się na 
serwer, a następnie przekopiowaniu wszyst- 
kich plików, jakie się na nim znajdują, do 
wybranej lokalizacji. W celu odtworzenia 
kopii wystarczy później wgrać wszystkie 
pliki ponownie na serwer. Nie jest to najwy- 
godniejsze rozwiązanie, dlatego też zaleca- 
my skorzystać z dostępnych wtyczek, które 
znacznie uproszczą cały proces. 

Nie należy również przesadzać z regularno- 
ścią wykonywania kopii zapasowych - jeśli 
do naszej strony dodajemy nowe posty śred- 
nio raz na tydzień czy dwa, tak samo często 
powinniśmy wykonywać kopie zapasowe. 


Wykonujemy kopię 
za pomocą wtyczki 
Warto skorzystać z wtyczki UpdraftPlus, 
która jest darmowa i ma ponad 3 miliony 
aktywnych instalacji. Pozwala na błyska- 


Plugin do aktualizacji 
WordPress UpdraftPlus 


E |A| Zainstaluj | szczegóły 


UpdraftPlus 


Łatwe jest tworzenie kopii i 
przywracanie. Kompletna kopia: ręczne 
lub zaplanowane (tworzenie kopa do 
Dropbox.... 


Autor: UpdraftPlus.Com. DavidAnderson 


Ostatnia aktualizacja: 2 tygodnie 
temu 


kkkkk 6 189 
Ponad 3 miliony aktywnych 


instalacji w Zgodny z używaną wersją 


WordPressa 


2 Następnie klikamy na Włącz. 


Plugin do aktualizacji 


WordPress UpdraftPlus 


Teraz klikamy na Naciśnij tutaj, aby 
rozpocząć!. 


Ustawienia UpdraftPlus k 


raftPlus - Kopia/przywracanie Kaj 
latki / profesjonalne wsparcie Ustawienia Wyłącz Zabrać turę  IOŃ 
Ar| 


Szczegóły 


Witamy w UpdraftPlus, zaufana wtyczka do 
tworzenia kopii zapasowych na świecie! 


Nacknij tutaj, aby rozpocząć! 


W oknie ustawień wtyczki w zakładce 
Kopia zapasowa / Przywracanie klikamy 
na Utwórz kopię. 


wiczne przywracanie kopii. Backup 
możemy wykonywać do Dropboxa, 
Google Drive'a, OneDrive'a, serwe- 
rów FTP, a nawet na e-mail. 


Logujemy się do panelu zarządza- 

nia naszej witryny, przechodzimy 
do zakładki wtyczki, klikamy na Dodaj 
nową, wyszukujemy wtyczkę Updraft- 
Plus i klikamy na Zainstaluj [1. 


Kopia zapasowa / Przywracanie 


Pliki: 


Ustawienia - Zazwaraowaee Narzędzia 


Przenieś | Konuj Prersiura / Rozszerzenia 


Następna zaplanowana kopia: 


Baza danych: 


1 1441 


Ostatni plik dziennika: 
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Existing backups £ 
Więcej zada Yóu aku koc zacaazwmy | Przeskari corowce latalny śzicec m Dotyka Oz zżaraćw koci | Pononcie skaci caczyeć zdalny 
Data kopii Dane kopii (kN ay podCAC) Dalarna 
um 19, 2022 129 i ana | mam |( w |[ wa [0 zc z 
Działania "przed wybrznymi kopiami ==" 


Teraz zaznaczamy opcję 
uwzględniania bazy da- 
nych oraz wszystkich plików | Zrób nową kopię zapasową 
i klikamy na Utwórz kopię E1. 


UpdraftPlus - Wykonaj kopię x 


Uwzględnij swoją bazę danych w kopii (...) 


Ó i - | (/| Uwzględnij wszystkie pliki w kopii zapasowej (...) 
W celu przywrócenia ko 
pii wystarczy przewinąć Kapia zapasowa nie zostanie wysłana do żadnego magazynu zdalnego - żaden nie 
: DOROCGC APT) został zapisany w ustawienia. Nie posiadasz żadnego magazynu zdalnego? sprawdź 
widok niżej i w polu Existing | upgrafzetus Vault. 
backu ps wybr ac zakr esp r zy: (0) Pozwół na reczne usunięcie tej kopii zapasowej (tzn. zachowaj ją, nawet jezeli zostanie 
wracania, a następnie kliknąć | przekroczony limit). 


na Przywróć [3. 


Warto pamiętać, że Word- 
Press pozwala nawet mniej 
doświadczonym użytkow- 
nikom na tworzenie skom- 
plikowanych witryn inter- 
netowych oraz aplikacji 
webowych. Wszystko dzięki ogromnej ilości _ od podstaw JavaScript i zobaczymy, jak za 
gotowych do wykorzystania wtyczek i mo- _ pomocą tego języka tworzyć interaktywne 
tywów. A w dalszej części książki poznamy obiekty na stronach internetowych. 


Utwórz kopię Anuluj 


Kopia zapasowa / Przywracanie — Przenieś/Klonuj Ustawienia Zaawansowane Narzędzia Premium / Rozszerzenia 
KORZYSTAMY pempmieiąkóm | [iza -Jieaeanaezwoywwn| 
Z ZAPISU W CHMURZE Hanmonogianikopiibuzydawych:  [męcne | X Jizachowjwiłazapiarówwychkoęz [2 
W celu skorzystania z chmury Aby naprawić czas utworzenia kopa. (na przykład jeśli serwer jest zajęty w Gzień i chcesz 
. . uruchomić w ciągu nocy). wykonaj zapasową kopię przyrostową, lub skonfiguruj bardziej złożonyj 
przechodzimy do zakładki harmonogram. uży UędranEluż Premium 
Ustawienia 1ESGUIEWIUE 
ramy dysk internetowy. Po za- |sseńine UM m rio 
. . . . PPP (dotknij ikony. aby wybrać lub 
pisaniu zmian musimy wejść FŻŻ3 
na tę zakładkę ponownie Ż oreewox O wow 
i dokonać autoryzacji na na- Piza r 
szym dysku internetowym, 
aby połączyć konto i umożli- ( oz ZY 
AA Oz 1 w 
Później kopie będą trafiały 
automatycznie na wskazany RZECZA ©. operstaci owi, 
przez nas dysk. AR »aśżykć 
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JavaScript: 
jak zacząć 


Do tej pory poznaliśmy podstawowe technologie internetowe 
przydatne przy tworzeniu witryn, skorzystaliśmy również 

z drogi na skróty i skonfigurowaliśmy blog w serwisie Blogger. 
Poznaliśmy także CMS - WordPress. W tym i kolejnych 
rozdziałach skupimy się już na wykorzystaniu JavaScript 

do tworzenia stron i dynamicznych, interaktywnych obiektów 


na stronach internetowych 


N a początku tej książki dowiedzieliśmy 
się bardzo ogólnie, czym jest JavaScript. 
Obecnie JS jest znacznie potężniejszy w po- 
równaniu z wersjami używanymi 10 lat 
temu. JavaScript to bezpieczny język - działa 
w przeglądarce, w bezpiecznym trybie pia- 
skownicy. Oznacza to, że ma dostęp tylko do 
przeglądarki i nie ma dostępu na przykład do 
lokalnego systemu plików. 


Co pozwala wykonać JavaScript 

w przeglądarce? 

JS w przeglądarce pozwala wykonywać 

bardzo wiele czynności. Umożliwia między 

innymi: 

m interakcje z użytkownikiem 

m manipulowanie stroną internetową i ser- 
wetem WWW 

m dodawanie nowej zawartości HTML 
do strony 

m reagowanie na działania użytkownika 

m pobieranie i ustawianie plików cookie 

e zapamiętywanie danych po stronie klienta 
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PORA NA JAVASCRIPT 


Dalsza część książki zawiera nieco bar- 
dziej zaawansowane treści i jest przezna- 


czona dla osób, które chcą nauczyć się 
więcej o JavaScripcie. Pomocna będzie 
podstawowa wiedza o HTML-u oraz CSS. 


Czego nie może zrobić JavaScript 

w przeglądarce? 

Jeśli JS nie może czegoś wykonać w przeglą- 

darce, najczęściej ma to związek z bezpie- 

czeństwem użytkownika: 

m JS w przeglądarce nie może odczytywać 
i zapisywać dowolnych plików na dysku 
użytkownika, kopiować ani uruchamiać 
programów. Zasadniczo ma również jedy- 
nie bardzo ograniczony dostęp do funkcji 
systemu operacyjnego. 

m Nie może chronić źródła strony ani obrazów. 

m Nie może uzyskać dostępu do stron inter- 
netowych hostowanych w innej domenie. 
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Przygotowujemy środowisko 
do programowania w JavaScripcie 


pecjalistyczne Środo- | 

wisko programowa- 
nia w samym JavaScrip- 
cie jest niewystarczające. 
Pracując nad tworzeniem 
rozbudowanych projek- 
tów, znacznie lepiej jest 
umieścić nasz projekt 
w IDE (zintegrowanym 
środowisku programi- 
stycznym), które ma wy- 
godny w obsłudze inter- 
fejs graficzny i zapewnia 
wiele przydatnych funk- 


cji, jak kolorowanie składni, podpowiadanie, [© open Fotaw 

debugowanie, autokorektę iwiele innych. |. + Bi KowAŃG * BRAK WARE 
Dodatkowo przy tworzeniu stron przydatne 

jest środowisko, które obsłuży HTML, CSS, | eu" | Newyfelde: 

JS i na przykład PHP. Wszystkie te cechy speł- lenkompute 7 see , 

nia Atom OIEUANMFYNA), który znajdziemy 

na płycie dołączonej do książki i w którym Teraz na górnym PPM" 
będziemy wykonywać kolejne wskazówki. pasku klikamy PELE" see me rze 


New Window Ctrl+Shif] 


Atom to nowoczesny edytor kodu źródłowe-  naFile, New File. 


= Ń 3 New File Ctr] 
go rozwijany przez popularny serwis GitHub. oz 
M Ó 11: Ż e że Ż uda GL aż Open File. Cu 
Oferuje duże możliwości personalizacji, ko- Właściwie już | - ; we 
. % g ś 2 z 2 Open Folder. Ctrl+Shi 
lorowanie składni wielu języków programo- możemy zacząć 


wania, inteligentne autouzupełnianie kodu, pisać nasz kod, jednak nie będziemy mogli 
a także otwieranie w kartach wielu plików korzystać ze specjalnych narzędzi dostęp- 
z kodem źródłowym. Obsługuje rozszerzenia _ nych dla konkretnego języka. Aby to było 
zwiększające jego możliwości. możliwe, musimy najpierw zapisać nasz plik. 


Project — :UaraScnipt_KS — Atom 


Po pierwszym 

uruchomieniu 
edytora Atom klika- 
my na Add folders 
po lewej stronie. 


Wskazujemy 

folder i klika- 
my na Wybierz 
folder. 
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JavaScript: jak zacząć 


W przypadku pliku HTML wystarczy zapisać 
go z takim właśnie rozszerzeniem. 


1 Virtual ClaneDrh 7 


Nazwa pliku: 


Zapisz jako typ: | All Files (*.*) 


Składnia naszego pliku zostanie auto- 

matycznie rozpoznana i podświetlona, 
a sam plik zostanie podpięty do projektu 
i będziemy mogli szybko uzyskać do niego 
dostęp. 
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Po wprowadzeniu zmian i ich zapisaniu 
możemy w Eksploratorze otwierać daną 
stronę. Atom potrafi jednak znacznie więcej. 


Tworzenie skryptów JS w Atomie 

- lepsza integracja 

Do tej pory tworzyliśmy skrypty JavaScript 
w pliku HTML i obserwowaliśmy efekty dzia- 
łania takiego skryptu bezpośrednio w prze- 
glądarce. Atom pozwala znacznie przyspie- 
szyć prace nad skryptami, jeśli tworzymy je 
i testujemy bezpośrednio w tym edytorze. Co 
najważniejsze, umożliwia nam to wygodne 
debugowanie kodu i szybkie wprowadzanie 
poprawek. W celu pełnej integracji najpro- 
ściej zainstalować moduł Node.js w naszym 
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systemie, dzięki czemu globalnie uzyskamy 
dostęp do komend i funkcjonalności JS, oraz 
dodatkowy moduł Script w samym Atomie, 
aby móc szybko uruchamiać napisany kod. 


Zaczynamy od zainstalowania pakie- 

tu Node.js. Pobieramy aktualną wer- 
sję ze strony: nodejs.org/en/download 
i instalujemy. 


Downloads 


Downłoad the Node.js source code or s pre buglt installer tor your płstform, and start developing today 


Current 


ka « da 


Windows Inszaller maxO5 Instalker Scurce Code 


Windows lnstalier (.msi) 
Windows Binary (.zip) 
ma<O$ installer (.pg) 
macO5 Binary (tar.gz) 
Linun Binaries (x64/ 
Unua Binaries (ARM) 
Source Code 


2 Najważniejsze to upewnić się podczas 
instalacji, że opcja Add to PATH jest ak- 
tywna i dopiero wtedy kliknąć na Next. Bez 
tego nie będziemy mogli bez problemu uzy- 
skać dostępu do bibliotek JS. 


$$! Nodej: Setup = x 


nede 


Custom Setup 
Select the way you want features to be nstalled. 


Check the icons in the tree below ta change the way features wil be nstaled 


Add Node.js, nem, and modules 
that were głobały nstaled by nom 
to re PATH environment variable 


Th festure requres OKB 6n your 
hard drive. It has 2 of 2 
subfeatures selected. The 
subfeatures require 2XB on your 
hard drive. 


ma [OE] na 


Reset Disk Usage 


Następnie przechodzimy do programu 
Atom i klikamy na górnym pasku na File, 
Settings LJ. 
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I) Settinqs — D:UavaScript_KS — Atom 

ile Fdil View Selection Find  Packac| 
New Window Ctl r Shi 
New File ch 
Open File... CH 
Open Folder Ctl+Shi 
Add Project Folder. Ctrl+ Shi 
Reopen Project 
Reopen Last Item Ctri+Sh 
Settings JJ NADE 


Teraz przechodzimy do zakładki URI 

Handling [£] i klikamy na Register as 
default [J. Uwaga! Bez tego nie będziemy 
mogli uzyskać dostępu do pełnego katalogu 
dodatków. 


Teraz w oknie ustawień klikamy na In- 

stall, w pole wyszukiwania wpisujemy 
script i instalujemy odpowiedni pakiet. 
Może jednak pojawić się nam taki błąd [2]. 


Install Packages 


W takim wypadku wchodzimy na stronę 
atom.io/packages/script i klikamy na 
Install. 


W oknie, które się pojawi, klikamy na 
Otwórz Atom [H. 


URI Handling 


Register a detal stom/ protocoihandler 


Otworzyć Atom? 


https//atom.io chce of 


D] Zawsze zezwalaj st 


powiązanej splikacji 


Jeśli wszystko przebiegnie pomyślnie, 
będziemy mieli od razu aktywny doda- 
tek script [3], który umożliwia uruchamianie 
skryptów JS bezpośrednio w programie Atom. 


W trakcie tworzenia kodu JS w większości 
przypadków nie będziemy chcieli zmieniać 
kodu HTML i CSS, a dodatkowo umieszczanie 
skomplikowanego kodu JS wewnątrz pliku 
HTML może stać się kłopotliwe i cały doku- 
ment będzie mniej czytelny. Dlatego też naj- 
lepszym rozwiązaniem, które pozwala zacho- 
wać porządek, jest tworzenie kodu JavaScript 
w odrębnym pliku wewnątrz tego samego 
katalogu, trzeba tylko umieścić odpowiedni 
odnośnik do tego pliku w kodzie HTML. 
Zobaczmy na przykładzie naszej interaktyw- 
nej etykiety, jak to zrobić. 


Tworzymy wewnątrz tego samego pro- 
jektu nowy plik. Klikamy w Atomie na 
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Project — D:UavaScript_KS 
górnym pasku naFile, |sle cd: View Selection 
New File. New Window 


New File 


Teraz kopiujemy 

całą zawartość 
pomiędzy znacznikami <seript> z pliku 
HTML i wklejamy do nowo utworzonego 
dokumentu. Klikamy na górnym pasku na 
File, Save As 


Open File. 


Nadajemy nazwę dla nowego pliku z roz- 
szerzeniem .js i klikamy na Zapisz. 


Nazwa pliku: | moje skrypyjj (© | 
7anpisz jaka typ: All Files (*.*) 


Składnia pliku zostanie podświetlona 

i jako język programowania zostanie 
wskazany JavaScript. Teraz wracamy do dokumentu HTML 

i pomiędzy znaczniki <seript> 
wstawiamy odnośnik do naszego pliku 
ze skryptem JS 


Dodatkowo wskazaliśmy jako atry- 
but type javascript, gdyż wewnątrz 
tego znacznika mogą znajdować się 
również inne typy skryptów. Poprzez 


"Podaj m 


Imię użytkownika: 


untrtled — D:UavaScnipt_Ks — Atom 
File Edit View Selectron Find Packages Help 
Ctrle Shifr= N untitledd 
New File Ctrl N 
Open File. Ctri+Q 
Open Folder. Ctrl + Shift + O 
Ctrl+Shift+A 
> 
Ctrl+Shift=T 
Settings Ctri+ Przecinek 
Config... 
Keymap 
Snippets. 
Stylesheet 
Save Cul+$ 
Save Ac... Ctrl+Shift+S 
SE B 
Jdve A 
Close Tab Ctrl+W 
Close Pane [Ctr=K Ctrl=W] 
Close Window Cil+Shift+W 
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bezpośrednią de- 
klarację podpo- 
wiadamy prze- 
glądarce, jakiego 
typu języka ma się 
spodziewać. 


Po zapisaniu 
obydwu do- 
kumentów i uru- 
chomienia pliku 
Przyklad.html 
nasza interaktyw- 


aa etykieta będzie IMIĘ UŻYTKOWNIKA: KRZYŚ 
nadal działać, PEENZZEZAA podaj nowe imię 


a w kodzie strony edo |] 


nie będzie widać 
naszego skryptu Em Anuluj 
i będzie on znacz- 
nie odchudzony. 


CC  Q©Pliik| DyJavaScript KS/Przyklad.htmi er © |- IR 


Komunikat 7 bieżącej strony 


© Choose a Theme 


Ul Theme 


Syntax Theme 


O Tremet 


8 © Installed Themes > 


JO Settings — Dalavaścii 
File Settings File Edit View Selecta] 
New Window 
New File = 
Open kle... z 
Themes | ore« roice.. ! 
Ul Adkl Project Folder 
Theme Onej| *== osa ' 
Dark Syntax Reopen Last Item funct for 
Theme — One Light sein | * s 
$ 
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Wyświetlamy informacje 

za pomocą JavaScriptu 

Wiemy już, jak w dokumencie HTML bez- 
pośrednio wywoływać zewnętrzne pliki JS. 
Nie zawsze jednak konieczne jest otwieranie 
strony w celu przetestowania działania skryp- 
tu. W dużej mierze skrypty JS działają w tle 
i użytkownik nawet nie musi sobie zdawać 
sprawy z tego, że są one aktywne i na przy- 
kład czekają na interakcje. 

W celu weryfikacji działania skryptu lub 
wywoływania jego poszczególnych funkcji 
najczęściej wykorzystuje się konsolę w prze- 
glądarce lub w IDE. JS ma odpowiednie me- 
tody, które umożliwiają wyświetlanie infor- 
macji w konsoli, dzięki czemu programista 
może szybko zweryfikować poprawność 
logiki swojego kodu lub na konkretnym eta- 
pie działania pętli zweryfikować wartości 
jakichś zmiennych. 

Oto kilka metod wyświetlania informacji za 
pomocą JS; skorzystamy z nich, żeby wyświet- 
lić znane wszystkim Helllo World na ekranie 
naszego komputera: 

m console.log() 

z document.write() 


Każda z powyższych metod daje możliwość 
wyświetlenia treści. Warto jednak wiedzieć, 
że document.write() używamy, gdy treść ma 
się pojawić w dokumencie HTML, natomiast 
console.log() umożliwia podgląd danych 
w samej konsoli bez ingerencji w wygląd do- 
kumentu i najczęściej używa się właśnie tej 
metody jako narzędzia do debugowania kodu. 
Uwaga! Wszelkie porady dotyczące przeglą- 
darek będą opisywane na przykładzie Google 
Chrome - w innych przeglądarkach, jak Fire- 
fox, Opera, Edge, opisywane kroki również 
są możliwe do realizacji, jednak mogą się 
nieznacznie różnić. 


z Console.log() 
W oknie z plikiem JS wprowadzamy 
treść - console.log(,Hello World"); 
Zapisujemy skrypt i uruchamiamy stronę 
w przeglądarce. 


Welcome 


console.log('Hello World' ); 


Ponieważ niczego nie podaliśmy w treści 


z alert() dokumentu, a jedynie zawarliśmy nasz 
b Project — D:UavaScript_KS — Atom 
ile Edit View Selection Find Packages Lielp 


Project 
k m Jav=Scnipt KS 


ex.hmtl 


[W 


=) hellojs 


<head> 


IE] moje skryptyjs 


<|DOCTYPE html» 


<html lang-"pl-PL"> 


<meta charset-"u 


Przykdad.htmi 


tf-8"> 


B) Przyklod.html <title>Przyklad</title> 
</head> 
<body> 
<script typez"text/ javascript" src="hello. js”>></script> 
</body> 
</html> 
© Przykad x SE 
©  QOPik| DylavaScript_KS/Przyklad.htmi x GFĘZYMU B*="1$ : 
R Al Elements Console Recorder £ Performance insights A Sources Network _ Performance = 2 3% 
5 Fite , 5 gz] 


JAVASCRIPT, HTML, CSS, PHP, WORDPRESS 


adam1l3zajacigmail.com 


plik JS, strona powinna na |© w 
pierwszy rzut oka być pusta. 
W Chrome wciskamy kombi- 
nację klawiszy [a]+fht+(I). 
Pojawi się widok z otwartą 
konsolą - Console - oraz zako- 


dowana przez nas informacja. 


C OQOPik 


x + 


D:/JavaScript_KS/Przyklad.html 


R dJ Console Recorder £ 
Paqe  Filesyste []  Przykładhtm hellojs x 
+ O top 1 console |logl "Hello Woria'); 
+ Ofile 
v BM Dz/JavaScnpt KS 
i Przykad.htmi 
ka hellojs 


Klikając po prawej stronie 
na odnośnik do pliku JS, zobaczymy 
również linię kodu, która jest odpowie- 
dzialna za wyświetlenie tej informacji. Jest 


to bardzo wygodna forma weryfikowania 
różnego typu relacji podczas działania 
skryptu JS. 


hello.js — DrUavaScript KS — Atom 
ile Edit View Selection Find Packages Helg 
Project 
v i JavaScript KS document.write 
B) shmt 
A hellojs 
B moje skryptyjs 


B Przyklad.htmi 


("Hello World” );| 


zm Document.write() 
W oknie z plikiem JS wpro- 
wadzamy treść document. 
write(' Hello World"); 


Zapisujemy i otwieramy do- 
kument HTML - zostanie wy- 


URUCHAMIAMY SKRYPT JS BEZPOŚREDNIO W ATOMIE 


Pokazane powyżej najprostsze przykłady 
wywoływania kodu JavaScript i wyświetla- 
nia informacji bezpośrednio z kodu zostały 
zaprezentowane na stronie internetowej 
wewnątrz przeglądarki. 

Jest jednak szybszy sposób weryfikacji 
poprawności kodu. Działanie samego 
skryptu JS możemy sprawdzać bezpośred- 
nio w Atomie. 


Jeśli zgodnie z wcześniejszą poradą 
zainstalowaliśmy dodatek script, 


będziemy mogli wykonywać kod JS bez- 
pośrednio w programie Atom. 


Po wpisaniu kodu i zapisaniu go 
w dokumencie z rozszerzeniem JS 
wystarczy kliknąć na górnym pasku na 


Packages Script Run Script ŁY 


Jeśli wykonaliśmy konfigurację po- 
prawnie, powinniśmy otrzymać taki 
rezultat B. 
Dzięki Node.js jesteśmy w stanie bezpo- 
średnio w Atomie uzyskać rezultat, jaki 
moglibyśmy zaobserwować w konsoli 
przeglądarki. 


(9 hellojs — DiUavaScript_KS — Atom 


File Ede View 


* BB JaraScript_KS 


Project 


console. log( 'Mello 


A exhmt 


CwieSmiht=G 5 


B hellojs 


EB) moje_seryptyje 


© Przydadhtm 
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świetlony wprowadzony przez nas tekst. Jak 
widać, ta metoda zapisuje wprowadzony ciąg 
znaków bezpośrednio na stronie. 


© Przyklad «x Mi 
G OFik| DyJavaScnpt_KS/Przyklad.htmi 
Hello World 
Alert() 


W oknie z plikiem JS wprowadzamy treść 
document.write( Hello World"); 


n Find Packsges Help 
ject 


rt('Hello world'); 


Zapisujemy i otwieramy dokument 

HTML - zostanie wyświetlony w formie 
okna pop-up. Jak widać, ta metoda tworzy 
okno z komunikatem, który należy zatwier- 
dzić, aby strona mogła dalej się ładować. 


KTK) 


Komurskat z bieżącej strony 


Heżo Wera 


Dla naszych potrzeb najczęściej będziemy 
korzystać z opcji console.log(), która po- 
zwala na szybki podgląd bez konieczności 
modyfikowania widoku strony i zatwierdza- 
nia jakichkolwiek informacji. 


'node"* is not recognized as an internal or external command, 
operable program or batch file. [zj 


A [Finished in 0.0755] 


Wszystko 


Najlepszy wynik 


>) Windows PowerShell 
© aplikacja 


Aplikacje 
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Warto wiedzieć — konsola w przeglądarce 


Poznaliśmy już konsolę w przeglądarce, która 
umożliwia odczytywanie informacji zawar- 
tych między innymi w skryptach JavaScript. 
Jest to ważne narzędzie, które zaawanso- 
wanym użytkownikom pozwala na bardzo 
wiele. Pozwala na przykład manipulować 
danymi czy wywoływać funkcje. 

Zanim przejdziemy do szczegółów, war- 
to wiedzieć, że możemy sami wykonywać 
funkcje i metody JavaScript bezpośrednio 
w konsoli. 

Dodatkowo to, że obecnie dokumenty HTML 
mogą być opisywane jako modele obiektowe 
dzięki standardowi DOM, sprawia, że może- 
my odwoływać się do każdego elementu jak 
do obiektu przez parametry. Każdy element 
na stronie staje się dostępny do naszej dyspo- 
zycji jako osobny obiekt. Więcej o tym stan- 
dardzie i o tym, co można zrealizować w jego 
ramach w JS, przeczytamy na dalszych stro- 
nach. Teraz jedynie warto zapamiętać, że ten 
standard pozwala nam naprawdę na wiele 
podczas korzystania z konsoli. 


Zmieniamy tryb wyświetlania 

w tryb edytowania 

Jeden z najbardziej spektakularnych przykła- 
dów tego, jak strony internetowe korzystają 


z DOM, to możliwość zmiany naszej przeglą- 
darki i wyświetlanej strony na edytowalny 
dokument. 


Otwieramy stronę internetową, na któ- 
rej chcemy przetestować działanie try- 
bu edytowania. Przechodzimy do konsoli. 
W Chrome wystarczy wcisnąć kombinację 


[en]+prtj+[1]. 


25" mamy dużo różnych dodatków 
w przeglądarce, nasza konsola może nie 
być przejrzysta, gdy zwrócą one zbyt wiele 
informacji. Możemy wyczyścić widok. Wy- 
starczy wpisać komendę elear() i zatwierdzić. 


Po jej wykonaniu konsola będzie wy- 

czyszczona. Teraz w celu aktywowa- 
nia trybu edycji zatwierdzamy polecenie 
document.designMode = 'on' 


> dacument.designMade = 'an' 


ton" 


Od tej pory możemy dowolnie mani- 
pulować elementami na stronie. Ponie- 
waż zgodnie ze standardem DOM wszystko 
w dokumencie HTML jest obiektem, może- 


= == "T- "Tę 

kdo” E : 
Na płycie dołączowej ćo książki znajdziemy pliki projektów emawiarrych we 

wskazówkach | narzędzia dla programistów; 180 płyty można pobeać 7 kspłłes pl. 


II więcej takich tematów znajdziesz na stronie głównej Onet pl 


 porseważ od dawna jest pows 


opartych na nim rozwiązań 


użytkowe opeoęramowanie Biuro 
gratką 30 Rorpiętość zass 


owe Czy rawet rozbudowane gry I 
to język dedry dia wszystkóch, którzy 


Kurs pregramowana - Jerażerigt, KTNU C: 
ramowania na prostych przysiadach, CH - Zac7n4 progyan 


MograrPowarwa, który ukazał się io dodatek do Niezbędriką ale możra qr 


ALZZE, 
ELF! 


sz: m © 


LTD 
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6 ł Ukazała się książka z seril Biblioteczka Komputer Świata, ne 3/2021, pod tytułem a_a 


30 4 upteaykih 


ć 


C++ na prostych przykładach. Zacznij programować. 
11 Jest to kurs programowania w C++ od podstaw - krok po kroku tworzymy wlasne 
projekty: programy tekstowe i oknem graficznym. 


1/ No płycie dołączonej do książki znajdziemy pliki projektów omawianych we 
wskazówkach I narzędzia dla programistów; 150 płyty można pobrać z ksplus.pl 


II więcej takich tematów znajdziesz na stronie głównej Onet.pl 


C++ jest jedym z nępopułariejszych języków programowania — i to od meu lat. Zawdzięcza 
te swojej wszechsticeności Co ożkawe, choć język ten sam w sebie nie zamiera wieka 
poleceń. to ponieważ od dawna jest powszechnie stosowany. fuskcjornąe bardzo dużo 
opartych na mm rozwiąznń 


Edytujemy stronę jak Zwykły £okument | Mozemy +350wać | 0OG3wać dowo rę elemezy 


V KŚ+ można kupić także inne książki awiorki: COMP. Kurz obslugi w przykładach, Photos*oo 

80 ków. które musisz poznać, 100 tneów do najlepszych narzędzi graliczrych 

A to © czym są poazczegóre rozdziały 

[© <zy to język samych płusów?. Najwazniejsze macomożc na temat Cee: stąd Się wzęja naEwa 
x seen 


STA, CZy jest IFkreNAGACjA | dat A ja ZACZĄĆ po saĆ kn Od OWY jak korTyt" ać ? pęrą, 
ai poco GadaWąĆ +OMernar7E W ADONE 


[Ę 7o%%2m zyta C+: Nzpozżym sposobem nauki gżyków tasżn ty" prog'zmstycznych jest 
akta W tem roędrake pojrwwy zoósławowe lik Hirabuecję C++ 0 podsżaaiw zai 
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a»utę 
"m © 
"IPSC" och» | | imę B 
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my każdy obiekt usunąć lub edytować jego 
zawartość. 


Wykonujemy polecenia JavaScriptu 
w konsoli 

Korzystając z konsoli, możemy przeprowa- 
dzić wiele prostych i złożonych zadań. 


Możemy bezpośrednio wykonywać pole- 
cenia, które wcześniej wprowadzaliśmy 
w pliku JS, jak console.log('Hello World'); 


R a] Elements Console Recorder k Performance insiq 
© O tp ©  Fiter 


console.log('Hello World'); 
Hello Warld 


undefined 


console.log( wyświetlamy dowolny tekst w konsoli"); 
Wyświetlemy dowolny tekst w konsoli 


undefined 
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Możemy w ten sposób tworzyć i odczy- 
tywać tablice. 


> console.log([1, 2, 3, 4]); 
v(4) [1, 2, 3, 4] 
0: 1 
1: 2 
2: 3 
3: 4 
length: 4 
b [[Prototype]]: 


Array(8) 


undefined 
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3 Możliwe jest też tworzenie obiektów. 


> console.log(fa:1, b:2, c:33); 
wfa: 1, b: 2, c: 3) 
a: 1 
b: 2 
c: 3 
b [[Prototype]]: Object 


undefined 


Warto wiedzieć, że możemy zmodyfi- 
kować metodę i korzystać na przykład 
z opcji error. 


undefined 
> console.crror('Informacja o błędzie '); 
© Informacja o błędzie 


undefined 


To może być szczególnie przydatne, jeśli 
tworzymy skomplikowany skrypt. 


Warto również wiedzieć, że mamy moż- 
liwość tworzenia w dość prosty sposób 
tabel LI. 


Możemy również liczyć wywołania pęt- 


i EB. 
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console.table(f'a':1, 'b':2)) 


(index) 
a 
b 
p Object 


Value 


undefined 
> for(let i=0;i<5;i++)f 
console.count(i); 


BB wb kk © — 
- Fkh k 


undefined 


Możemy też deklarować funkcje, a póź- 
niej je wywoływać. 


> funtLium luup()£ 
var x — 5 
£ar(let i=1;i<6ji++)f 
x=x*ji; 


console.log(x) ; 


> 


Analizujemy czas wykonywania 
konkretnej funkcji 

Podczas tworzenia skryptów JavaScript może 
się okazać, że wydajność i optymalizacja 
naszego skryptu mają duże znaczenie. Wy- 
starczy umieszczenie kilku mało wydajnych 
funkcji, a czas wykonywania konkretnej akcji 
na stronie się wydłuży, co może zniechęcić 
użytkowników naszej witryny. 

W JavaScripcie jest wiele metod, które umoż- 
liwiają weryfikację czasu wykonywania po- 
szczególnych elementów kodu. Jeśli chcemy 
zmierzyć czas wykonywania poszczególnej 


funkcji, najprościej skorzystać z możliwości 
metody console.time() 


W konsoli wprowadzamy polecenie con- 

sole.time('czasPetli'), następnie w ko- 
lejnym wierszu, do którego przechodzimy, 
naciskając klawisze (A+(eże], wpisujemy 
wywołanie funkcji, której czas chcemy zmie- 
rzyć, a następnie w ostatniej linii - polecenie 
console.timeEnd(czasPetli'), co pozwala 
na zmierzenie czasu realizowania danej funk- 
cji. Wartość czasPetli jest dowolna i ustala- 
na przez użytkownika - musi jednak zgodzić 
się w obydwu poleceniach. 


console.time('czasPetli' ) 
loop() 
console.timeEnd( 'czasPetli' ) 


5 

1e 

30 

128 

608 

czasPetli: 0.14501953125 ms 
undefined 


Czas działania dla 80 iteracji rośnie i mo- 

żemy to zaobserwować, nie jest to jednak 
duży wzrost, gdyż nie mamy tutaj do czynie- 
nia ze wzrostem wykładniczym, jaki mógłby 
wystąpić przy pętli zagnieżdżonej. 


9.427473568330258e+111 
7.259154601414298e+113 
5.6621405891031526e+115 
4.47309108653914907e+117 
czasPetli: 1.07275390625 ms 


undefined 
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JavaScript: 
podstawy 


Znając już obsługę środowiska IDE Atom oraz zasady 
korzystania z konsoli, możemy przejść do podstaw 
JavaScriptu. Poznamy krok po kroku najważniejsze 
elementy tego języka, które przydadzą nam się 

przy tworzeniu własnych skryptów 


Zmienne w JavaScripcie 


mienne w JavaŚcripcie to kontenery, które 
przechowują dane wielokrotnego użytku. 


m Wartość przechowywaną w zmiennej 
można zmienić podczas wykonywania 
programu. 

e Zmienna to tylko nazwa nadana lokalizacji 
w pamięci, wszystkie operacje wykonane 
na zmiennej wpływają na tę lokalizację 
w pamięci. 


console.log('Zmienne w przykładach ' ); 


x=2 


JavaScnpt - hellojs3 4h 


Zmienne w przykładach 


[i 


x 


Referencetrror: x is 


stoin]:4 
- 2; 


not defined |A| 
at (stdin]:4:3 


at Seript.runInTnisConte: /m:129:12) 
at Object.runInThisConte: m:305:70) 

at node: 1nternal/process. 100: 76:19 

at [stdin] wrapper:6:22 

at evalscript (node:internal/process/execution:75:60) 

at nade:1nternal/main/eval_stain:23:5 

at socket.<anonymous> (node:internal/process/cxecution:21]:5) 
at Socket.emitl events:533:35 

at endReadableNT (node:internal/streams/readable:1345:12) 


[rinished in 1.2295] 


m W JavaScripcie wszystkie zmienne muszą 

być zadeklarowane przed użyciem. 
Najważniejsza z tych własności to ta ostatnia 
- bez zadeklarowania zmiennej nie możemy 
jej użyć i pojawi się błąd. W tym przypadku 
x is not defined EL], czyli x nie został wcześ- 
niej zadeklarowany. 


Deklaracja poprzez słowo 
kluczowe var 

Przed wejściem w życie standardu ES2015 
(jest to usystematyzowana wersja standaryzacji 
dla JavaScriptu) mogliśmy deklarować zmien- 
ne w JS jedynie za pomocą słowa kluczowego 
var, po którym następuje nazwa zmiennej 


console.log('Zmienne w przykładach); 
var x; 
x-2 


console.log(x); 


JavaScript - hellojsi + 


zmienne w przykładach 
ś 
2 


[Finished in 8.948s] 
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i średnik. Obecnie możemy NEM 


console.log('Zmienne w przykładach '); 


również korzystać ze słów 
let oraz const. 

W tym przykładzie x to na- 
zwa zmiennej, która powin- 
na być zdefiniowana przez 
użytkownika i powinna być 
unikalna. Tego typu nazwy 
są również znane jako iden- 
tyfikatory. Zasady tworzenia 
identyfikatora w JavaScrip- 
cie są takie, że nazwa iden- 
tyfikatora nie powinna być 
żadnym predefiniowanym 
słowem (tak zwanym sło- 
wem kluczowym). 


var var; 


var = 2 


JavaScript - hellojs5 


> 2 | var var; 
| A 

| var = 2 
I 


3 
4 | console. log(var); 
5 


[Finished in 8.3373] 


zykład.htmi 


console.log(var); 


SyntaxError: (:/Users/krzys/.atom/package</<cript/nade_module</.bin/bahel: Unexpected token (2:4) 
1 | console.lag('Zmienne w przykładach*); 


Próba użycia słowa kluczowego jako nazwy zmiennej generuje błąd składni 


cansale.log('7mienne w przykładach '); 
2 var _var; 

_var = 2 

console.log(_var):; 


JavaScript - hellojss4 + 


Zmienne w przykładach 
2 
[rinished in 8.9573] 


Pierwszym znakiem musi być litera, podkre- 
ślenie (_) lub znak dolara ($). Kolejne znaki 
mogą być dowolną literą lub cyfrą, podkre- 
śleniem lub znakiem dolara. 

Dodatkowo warto wiedzieć, że w Java- 
Scripcie możemy przypisywać wartość do 
zmiennej zarówno w trakcie jej deklaracji, 
jak też później, w dowolnym miejscu skryp- 
tu HH. Oto kilka przykładów poprawnej de- 
klaracji zmiennych oraz przypisywania im 
wartości. 


Deklaracja poprzez słowo kluczowe let 
Na tym etapie nie będziemy dokładnie oma- 
wiać deklarowania zmiennych w ten sposób. 
Najważniejszą informacją powinno być dla 


elrome 


console.log('Zmienne w przykładach); 

var x; 

var imie, adi tytul; 

var numer = 8 | B | 
console.log(numer); 

JavaScript - hellojs8 w/ 


Zmienne w przykładach 
a 
[Finished in 9.9755] 


console.log( Zmienne w przykładach ); 
console.log(x); 
var xX=5; 


4  console.log(x); 


JavaScript - hellojs4 w 


Zmienne w przykładach 
undefined 

5 

[Finished in 1.315] 


Takie wywołanie jest dopuszczalne dla var 


nas to, że w odróżnieniu od var, które pozwa- 
la na tworzenie zmiennej o zasięgu funkcji, 
let tworzy zmienne o zasięgu bloku kodu. 
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podstawy JavaScriptu 


JAVASCRIPT, CZYLI JĘZYK DYNAMICZNIE TYPOWANY 


JavaScript jest językiem dynamicznie 
typowanym. Oznacza to, że nie musimy 
deklarować typu zmiennej, ponieważ jest 
on automatycznie konwertowany do pożą- 
danych wartości w czasie wykonywania się 
skryptu. Przykładowo możemy zdefiniować 
zmienną w podany sposób, a następnie 
przypisać jej inną wartość, która będzie 
postrzegana jako wartość innego typu: 


console. ( zmienne przykłada 


Jak widać, zmienna może przyjmować 
różne wartości i nie musimy się martwić 
deklarowaniem typu tak, jak ma to miej- 
sce w innych językach programowania. 

Warto też wiedzieć, co się stanie w przypad- 
ku próby dodania do siebie dwóch wartości 
różnych typów, na przykład string oraz int. 


console Zmienne przykładach 


Podczas operacji dodawania dwóch 
zmiennych nie otrzymaliśmy błędu - jest 
to związane ze sposobem dynamicznego 
zmieniania typów zmiennych. W przypadku 
gdy zamierzamy dodać do siebie zmienne 


JAVASCRIPT, HTML, CSS, PHP, WORDPRESS 


typu string zawierające znaki oraz zmienne 
typu int, float zawierające liczby, dochodzi 
do konwersji tych drugich na łańcuch 
znaków. Dzięki temu nie pojawia się błąd, 
ale następuje konkatenacja (łączenie) 
łańcuchów. 

Jeśli zależy nam na traktowaniu konkretnych 
wartości przechowywanych w formie łań- 
cuchów znaków jako wartości liczbowych, 
możemy skorzystać z metod parselnt() oraz 
parseFloat(), ta pierwsza zwraca liczbę 
całkowitą, druga zmiennoprzecinkową. 


Zmienne w przykłada 


console. 
sole 


console. 


console. 


Dzięki takiemu zastosowaniu metod 
możemy bez problemu dynamicznie 
korzystać praktycznie z każdej wartości 
przypisanej do dowolnej zmiennej. 
Dodatkowo możemy skorzystać z nieco 
szybszej automatycznej formy konwersji. 
W tym przypadku dodanie operatora + 
przed zmienną powoduje oznaczenie jej 
jako wartości liczbowej. 
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console.log( 7mienne w przykładach ); 
console.log(x); 

let x=5; 

console.log(x); 


JavaSciipt - hellojs5 4h 


Zmienne w przykładach 
[stdin]:4 
console. log(x); 


ReferenceError: Cannot access 'x' before initialization 

at [stdin]:4:13 

at Script.runInThiscontext (node'vm:129:12) 

at object.runInThiscontext (node:vm:365:38) 

at node: 1nternal/proces</execut10n: 76:14 

at (stdin] -wrapper:6:22 

at evalscript (node: internal/process/execution:75:60) 

at node:internal/main/eval_stdin:29:5 

at Socket.<anonymous> (node:internal/process/execution:213:5) 

at Socket.emit (node:events:529:35) 

at endRcadableNT (node:internal/streams/readable:1345:12) 
[Finished in a.4395] 


Wprzypadku let otrzymamy błąd 


Deklaracja poprzez słowo 
kluczowe const 

Z tego typu deklaracji już korzystaliśmy 
w naszych przykładach. Wyróżnia je to, że 
są to zmienne tylko do odczytu - nie może- 
my zmieniać ich wartości w trakcie pracy 
skryptu. 


console.log( ' Zmienne w przykładach); 


const imic = 'Krzysiek* 


console.log(imie); 
imie = 'Adam' 
console.log(imic); 


JawaScript - hello.js:5 A 


zmienne w przykładach 
krzysiek 

[stdin]:6 

imie - 'Adam'; 


TypeError: Assignment to constant variable. 

st [stdin]:6:6 

at script.runininistontext (nade:vm:129:12) 

at Object.runInThisContext (node:vm:305:389) 

st node: internal/proces>/execution:76:19 

at [stdin]-wrapper:6:22 

at evalscript (node:internal/process/exccution:75:60) 

at node: internal/main/eval_stdin:29:5 

at Socket.<anonymous> (node:internal/process/execution:213:5) 

at Socket.emit (node;events:539:35) 

at endseadableNi (node:internal/streams/readable:1345:12) 
[Finished in 8.955] 


Przy próbie przypisania nowej wartości 


do zmiennej const pojawia się błąd 


Zakresy zmiennych w JavaScripcie 

Poprzez zakres zmiennej rozumiemy taką 

część programu, w której uzyskamy bezpo- 

średni dostęp do zmiennej. W JS możemy 

wyróżnić dwa rodzaje zakresów: 

z Zakres globalny - zakres poza najbardziej 
zewnętrzną funkcją 

z Zakres lokalny - zakres wewnątrz kon- 
kretnej funkcji 

Oto praktyczny przykład: 


console.log( Zakresy zmiennych'); 


let zmiennaGlobalna = "lo jest zmienna globalna”; 
function wewn() 4 


let zmiennatokalna = "To jest zmienna lokalna”; 


console. log(zmiennaGlobalna); 


console. log(zmiennaLokalna); 


wewn( ) ; 


lavaScnpt - hellojs10 w 


Zakresy zmiennych 
To jest zmienna globalna 
To jest zmienna lokalna 
[Finished in 0.3465) 


Deklaracja zmiennej globalnej jest poza funk- 
cją, a lokalnej - wewnątrz funkcji. W tym 
przykładzie po danych wyjściowych widzi- 
my, że zarówno jedna, jak i druga zmienna 
jest dostępna wewnątrz funkcji, gdyż otrzy- 
mujemy rezultat w konsoli. 


console.log('Zakresy zmiennych” ); 

let zmiennaGlobalna = "To jest zmienna globalna”; 
function wewn() 4 

let zmiennaLokalna = "To jest zmienna lokalna”; 


wewn( ); 
console.log(zmiennaGlobalna); 
console. log(zmiennalLokalna); 


JavaScńpt - hellojsi0 4h 


Zakresy zmiennych 
To jest zmienna globalna 
[stóin]: 
console. 


og(zniennaLokalna); 


Referencefrror: zmiennatokalna is not defined 
st [stdin]:42;23 
nt Script. runtaThi sfontext (node:vm:129:12) 


Po przeniesieniu instrukcji console.log 
zaraz po wywołaniu funkcji i wykonaniu 
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podstawy JavaScriptu 


skryptu otrzymujemy błąd - jesteśmy w sta- 
nie zobaczyć wartość zmiennej globalnej, 
jednak dla zmiennej lokalnej otrzymujemy 
informację o tym, że nie została zadeklaro- 


wana. Tak więc, jak przeczytaliśmy powy- 
żej, zmienna lokalna istnieje jedynie we- 
wnątrz konkretnej funkcji, w której została 
zadeklarowana. 


Operatory RZE Przykad him 
w JavaScripcie 


console.log( ' Przypisanie '); 
let obj = (); 


obj.x = 3; 
console.log(obj.x); 


JavaScripcie jest mnóstwo operatorów 

i każdy z nich ma swoje zastosowanie. 
Poznamy teraz te najbardziej przydatne, 
zwłaszcza na początku nauki tego języka. 
Dzięki zapoznaniu się z operatorami już te- 
raz, na późniejszym etapie - przy pętlach, |,, 
instrukcjach warunkowych i funkcjach - bę- 
dzie nam znacznie łatwiej czytać kod. 
Możemy wyróżnić operatory przypisania, 
porównania, arytmetyczne, bitowe, logicz- |E5>5,, 
ne, warunkowe i kilka innych. e 
5 


(x:3,y:5V 
[Finished in 1.0315] 


console.log(obj); 


const key = *"y"; 
obj[key] = 5; 
console.log(obj[key]); 
console.log(obj); y 
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Operator przypisania 
To operator, z którego już korzystaliśmy; jest 
określany znakiem = i przypisuje wartość 


OPERATORY POROWNANIA 


OPERATOR OPIS PRZYKŁADY ZWRACAJĄCE 
PRAWDĘ 
Równe (== Zwraca true, jeśli operandy są równe 3==varl 
„3” ==varl 
3==,3 
Nierówne (!=) Zwraca true, jeśli operandy nie są równe varl !=4 
var2 l= „3” 
Ścisłe równe (===) Zwraca true, jeśli operandy są równe i tego 3 ===varl 
samego typu 
Ścisłe nierówne (!==) Zwraca true, jeśli operandy są tego samego varl == „3” 
typu, ale nie są równe lub są innego typu EE 9 
Większe niż (>) Zwraca true, jeśli lewy operand jest większy var2 >varl 
niż prawy operand s127>2 
Większe lub równe (>=) Zwraca true, jeśli lewy operand jest większy var2 >=varl 
lub równy prawemu operandowi varl>=3 
Mniejsze niż (<) Zwraca true, jeśli lewy operand jest mniejszy varl <var2 
niż prawy operand „2” <12 
Mniejsze lub równe (<=) Zwraca true, jeśli lewy operand jest mniejszy _ | varl <=var2 
lub równy prawemu operandowi var2 <=5 
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po jego prawej stronie do elementu po lewej 
stronie. Może pełnić wiele funkcji, jednak 
najczęściej będziemy go stosować w celu 
przypisania określonej wartości do zmiennej, 
obiektu lub innego elementu. 


Operatory porównania 

Operator porównania porównuje swoje ope- 
randy i zwraca wartość logiczną na podsta- 
wie tego, czy porównanie jest prawdziwe. 
Operandy mogą być wartościami liczbowy- 
mi, łańcuchowymi, logicznymi lub obiekto- 
wymi. Ciągi są porównywane na podstawie 
standardowej kolejności leksykograficznej, 
przy użyciu wartości Unicode. W większości 
przypadków, jeśli oba operandy nie są tego 
samego typu, JavaScript próbuje przekonwer- 
tować je na odpowiedni typ do porównania. 
To zachowanie zwykle powoduje liczbowe 
porównywanie operandów. 


Operatory arytmetyczne 

Operator arytmetyczny przyjmuje jako 
operandy wartości liczbowe (dosłowne lub 
zmienne) i zwraca pojedynczą wartość licz- 
bową. Standardowe operatory arytmetyczne 
to dodawanie (+), odejmowanie (=), mnoże- 


EEEM 


console.log( Operatory ); 
console.log( 'Arytmetyczne' ); 
var X =4; 

var y = 6; |A| 

var z1 = y/x; 

var Z2 = x/y; 


console.log(z1); 
console.log(z2); 


JavaScnpt - hellogs9 w” 


operatory 
Arytnetyczne 

e 

Infinity 

[Finished in 1.811s] 


nie (*) i dzielenie (/). Operatory te działają 
tak samo, jak w większości innych języków 
programowania, gdy są używane z liczbami 
zmiennoprzecinkowymi (co ciekawe, dziele- 
nie przez zero £] daje Infinity, czyli nieskoń- 
czoność, co jest dość unikalne, bo w wielu 
innych językach taka operacja zwraca błąd 
krytyczny). 

Oprócz standardowych operacji arytmetycz- 
nych (+, =, *%, /) JavaScript udostępnia ope- 
ratory arytmetyczne wymienione w tabeli. 


OPERATORY ARYTMETYCZNE 


OPERATOR OPIS PRZYKŁAD 

Pozostałe (%) Operator binarny. Zwraca całkowitą resztę 12%5 zwraca 2 
z dzielenia dwóch operandów 

Przyrost (++) Operator jednoargumentowy. Dodaje jeden do Jeśli x wynosi 3, to ++x ustawia x na 4 
swojego operandu. Jeśli jest używany jako operator | i zwraca 4, podczas gdy x++ zwraca 3 
przedrostkowy ( ++x), zwraca wartość swojego i dopiero wtedy ustawia x na 4. 
operandu po dodaniu jednego; jeśli jest używany 
jako operator przyrostka ( x++), zwraca wartość 
swojego operandu przed dodaniem jednego 

Zmniejsz (--) Operator jednoargumentowy. Odejmuje jeden Jeśli x wynosi 3, to --x ustawia x na 2 


Negacja jednoargumentowa (-) 


Jednoargumentowy plus (+) 


Operator potęgowania (**) 


od swojego operandu. Zwracana wartość jest 
analogiczna jak w przypadku operatora inkrementacji 
Operator jednoargumentowy. Zwraca negację 
swojego operandu 

Operator jednoargumentowy. Próbuje 
przekonwertować operand na liczbę, jeśli jeszcze 
nie jest liczbą 

Oblicza podstawę do wykładnika potęg 


i zwraca 2, podczas gdy x-- zwraca 3 
i dopiero wtedy ustawia x na 2 


Jeśli x wynosi 3, -x zwraca -3 


+3" zwraca 3 
+true zwraca 1 


2 ** 3 zwraca 8 
10 ** -1 zwraca 0.1 
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OPERATORY LOGICZNE 


OPERATOR STOSOWANIE OPIS 


Logiczne ORAZ (8z8z) | exprl 68. expr2 Zwraca exprl, jeśli można go przekonwertować na false; w przeciwnym razie 
zwraca expr2. Tak więc, gdy jest używany z wartościami boolowskimi, 8.8 zwraca 
true, jeśli oba operandy są prawdziwe; w przeciwnym razie zwraca false 
Logiczne LUB (||) | exprl | | expr2 Zwraca expr1, jeśli można go przekonwertować na true; w przeciwnym razie 
zwraca expr2. Tak więc, gdy jest używany z wartościami boolowskimi, | | zwraca 
true, jeśli któryś z operandów jest prawdziwy; jeśli oba są fałszywe, zwraca false 
Logiczne NIE (7) lexpr Zwraca false, jeśli jego pojedynczy operand ma wartość logiczną true; 

w przeciwnym razie zwraca true 


m Welcome Przi 

Operatory logiczne . EPEE TEPZE 

Operatory logiczne są zwykle używane var a2 - false || true; 

z wartościami boolowskimi (logicznymi), var a3 = true || false; 

: Pa . var ań - false || (3 -- 4); 
zwracają wartość logiczną. Jednak operatory  AEREPRGJCWKG 
Sz8z i || faktycznie zwracają wartość jedne- var a6 = false || 'Kot'; 
go z określonych operandów, więc jeśli te var a7 = 'Kot* || false; 
operatory są używane z wartościami inny- kabaęję pna, tak | 

AR .. PZ . a2 = + ) 

mi niż Boolean, mogą zwracać wartość inną Gole logs = | 655) 

niż Boolean. Operatory logiczne są opisane console.log('a4 - * + a4) 

w tabeli powyżej. console.log('a> = * + a5) 
console.log('a6 = ' + a6) 
c<onsole.log('a7 = * + a7) 

Weltorne Przykld 
var al = true 84 true; palbeaja keżeię 
var a7 = true KR false; a1 = true 
var aj — false 88 true; RWE 
33 = true 
var a4 = false 88 (3 == 4); 54 = AE 
. . "53 . 85 = Ko 
var a5 = 'Kot' 88 'Pies'; 06 = Kot 
var ań = false RA 'Kat'; PAZERGE 
[Finished in 1.8135] 
var a7 - 'Kot' 88 false; 
console.log('a1 = * + a1) Oto kilka przykładów w praktyce dla operatora 
console.log('a2 = ' + a2) logicznego || (LUB): 
console.log('a3 = ' + a3) 
console.log('a4 - * i a4) Welcome 
console.log('a5 = * + a5) 1 var ai = !true; 
console.log('a6 = ' + a6) var a2 - !false; 
console.log('a7 = ' + a7) var a3 - !'Kot'; 
JavaScript - hellojs9 + console.log('a1 - ' + a1) 
console.log('a2 = * + a2) 
EZ console.log('a3 = * + a3) 
a2 = false 
a3 = false 
34 = false s w 
35 = Pies JavaScript - hellojs:1 
=f 
3: A=ifik 
[Finished in 1.8355] 3 = ŻA 
[rinished in 1.3225] 


Oto kilka przykładów w praktyce dla operatora Oto kilka przykładów w praktyce dla operatora 


logicznego 8.8. (ORAZ lub I) logicznego ! (NEGACJA) 
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Instrukcja warunkowa if 


B ardzo często w trakcie tworzenia kodu 

skryptu okazuje się, że będziemy musieli 

skorzystać z instrukcji warunkowych if (jeże- 

li); są to na przykład takie sytuacje: 

m użytkownik może uzyskać dostęp do stro- 
ny, jeśli ma odpowiedni poziom dostępu, 

m sprzedaż produktu jest możliwa, jeśli jest 
on na stanie magazynowym, 

m dane pole ma być podświetlone zawsze 
wtedy, gdy użytkownik nie wprowadzi 
w nie żadnej treści. 

Aby w kodzie zrobić coś pod określonym 

warunkiem, używamy instrukcji warunko- 

wej if. Zaczynamy ją od słowa kluczowego 
if, po czym umieszczamy nawias, w którym 
znajdzie się warunek. Warunek to wyraże- 
nie, które zwraca wartość logiczną (czyli 
true lub false). Można go utworzyć na przy- 
kład przy użyciu znaku porównania ==, 
czy !=. Za nawiasami z warunkiem w nawia- 
sach klamrowych określamy, jakie instruk- 
cje mają zostać wykonane, gdy warunek 
jest spełniony (zwraca true). Jeśli nie jest 
spełniony (zwraca false), to instrukcje nie 
zostaną wykonane. 

W przykładzie EN widzimy, że w przypadku, 

gdy wynik sprawdzenia zwraca wartość lo- 

giczną true, wykonywany jest kod wewnątrz 
instrukcji if, natomiast jeśli nie, po prostu 
wychodzimy z instrukcji i wykonywany jest 
dalszy kod. Alternatywnie, tak jak w naszym 
przykładzie, możemy użyć słowa kluczowego 

else, które przy instrukcji warunkowej id 

pozwala sformułować operację dla zwróco- 

nej przez test logiczny wartości false. 

Tak więc do zapamiętania jest informacja, 

że gdy porównujemy ze sobą dwie wartości 

(tak jak powyżej zmienną nr z liczbą 55), 

wynikiem takiej operacji zawsze będzie war- 

tość Boolean, czyli true lub false (prawda 

lub fałsz) E]. 

Warto też zwrócić uwagę, że zgodnie z tym, 

czego dowiedzieliśmy się wcześniej o ty- 

pach danych, takie sprawdzenie, jak w tym 
przykładzie [Ą, zadziała bez problemu, gdyż 


const nr = 55; 


if (nr > 38) 4 
console.log("Liczba jest większ 
) else £ 


cansole.log("liczha jest mniejs 


za luh równa 36" 


JavaScript - hellojs2 * 

Liczba jest większa od 30 

(Finished in 1.045] 
const a = 26; 
const b = 36; 


console.log(b > a); 
console.log(b < a); 


console.log(h === a); 


it (a < b) 1 
console.log('A jest mniejsze od B'); 


JavaScnpt - hellogs:10 w 


true 
false 
false 
A jest mniejsze od B 
[Finished in 1.0135] 


mimo że sprawdzamy wartość liczbową oraz 
tekstową, typy zmiennych są dynamicznie 
dostosowywane - dzięki temu sprawdzenie 
zadziała poprawnie. Na pewno nie powiodło- 
by się to w innych językach programowania 
bez takiej obsługi typów zmiennych. 


if ("13* > 5) ( 


console.log( Liczba 13 jest większa od 5 


JavaScript - hellojs4 */ 


Liczba 13 jest większa od 5 
[Finished in 1.0155] 
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Welcome 


const animal = "koń" 


switch (animal) £ 
case "pies": 
console.log("Psy opcja 1"); 
hreak; 
case "kot": 
console. log("Kot opcja 27); 
break; 
case "koń": 
console.log("Koń opcja 3"); 
break; 
default: 
console.log("Inny zwierzak”); 


lavaScnpt - helloje14 w 


Koń opcja 3 
[rinisned in 1.2365] 


Em SWITCH - CASE 

Konstrukcja switch jest dość często 
spotykana w językach programowania. 
Jest kolejnym sposobem tworzenia 
warunków - tym razem na zasadzie 
przyrównania wyniku do konkretnych 
wartości. 

Każdy przypadek kończy się słowem 
break, które kończy wykonywanie 
instrukcji switch. 

Jeżeli pominiemy to słowo, wtedy 
nawet przy pomyślnym przyrównaniu 
zostaną wykonane kolejne sprawdze- 
nia, co często może powodować błędy. 
Dodatkowo instrukcja switch ma 
specjalny przypadek default, który 
będzie wybierany, gdy wszystkie inne 
przypadki będą błędne (odpowiednik 
else w instrukcji if). 


Możemy również skorzystać z bar- 
dziej złożonej konstrukcji else if, 
dzięki temu w jednym bloku mo- 
żemy sprawdzić wiele różnych wa- 
runków jeden po drugim, a dopiero 
po kilku warunkach, gdy wszystkie 
logiczne testy wypadną negatyw- 
nie, będziemy mogli wykonać in- 
strukcje z sekcji else. 


const name = "Test"; 


if (name aaa "IEST1") £ 
console.log("TE5ST1"); 
) else if (name === "TEST2") ( 
console. log("TEST2"); 
) else if (name === "TEST3") ( 
console.log("1E513"); 
) else ( 
console.log("Nie znaleziono odpowiedniego testu”); 
, 


JavaScript - hellojs:10 % 


Nie znaleziono odpowiedniego testu 
[Finished in 1.0445] 


Pętle i iteracje 


ętle oferują szybki i łatwy sposób na 

powtarzanie danych. Możemy myśleć 
o pętli jak o skomputeryzowanej wersji 
gry, w której mówimy komuś, aby zrobił 
X kroków w jednym kierunku, a następnie 
Y w drugim. Jako pętlę można wyrazić na 
przykład polecenie „Idź pięć kroków na 
wschód” LJ. 
Istnieje wiele różnych rodzajów pętli, ale 
zasadniczo wszystkie robią to samo - po- 


Welcome 
for (let krok = 


tunsule.lug('Idź jeden kruk na wschóu'); 


4 © 


Przyki 


zów od 


8 do 4. 


JavaScript - hellojs4 %/ 


Idź jeden krok na wschód 
Idź jeden krok na wschód 
Idź jeden krok na wschód 
Idź jeden krok na wschód 
Idż jeden krok na wschód 
[Finished in 1.1535] 
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wtarzają czynność kilka razy. (Warto pamię- 
tać, że liczba może wynosić zero). 

Różne mechanizmy pętli oferują różne sposo- 
by określania punktu początkowego i końco- 
wego pętli. Istnieją różne sytuacje, w których 
jeden typ pętli jest łatwiejszy w implementa- 
cji niż inne. 


Pętla for 

Pętla for powtarza się, dopóki określony wa- 
runek nie zmieni się na fałsz. Pętla for w Java- 
Scripcie jest podobna do pętli for w Javie i C. 


Przyk 


elcome 
for kala: [Warunek]; [Inkrementacja]) 
Instrukcje 


Oto przykład uniwersalny dla pętli for, 


który omówimy element po elemencie 


Wyrażenie inicjujące [Wyrażenie], jeśli 

istnieje, jest wykonywane. To wyrażenie 
zwykle inicjuje jeden lub więcej liczników 
pętli, ale składnia umożliwia wyrażenie o do- 
wolnym stopniu złożoności. To wyrażenie 
może również deklarować zmienne. 


Wyrażenie [Warunek] jest testem logicz- 

nym. Jeśli wartość [Warunek] jest true, 
instrukcje pętli są wykonywane. W prze- 
ciwnym razie pętla for się kończy. (Jeżeli 
wyrażenie [Warunek] zostanie całkowicie 
pominięte, przyjmuje się, że warunek jest 
prawdziwy). 


Instrukcje. Aby wykonać wiele instruk- 
cji, używamy instrukcji blokowej ( ... ]), 
aby je pogrupować. 


4: zadeklarujemy inkrementację, wy- 
konywane jest wyrażenie w obszarze 
[Inkrementacja]. 


Ę Pętla wraca do kroku 2. 


To teoria - a teraz przyjrzymy się znacznie 
bardziej złożonemu przykładowi szkolenio- 
wemu, który będzie zawierać większość 
elementów omówionych na poprzednich 
stronach. 

W tym przykładzie jest instrukcja for, która 
służy do zliczania, ile konkretnie elementów 
wybraliśmy na liście w dokumencie HTML. 
Oto kod dokumentu HTML, który musimy 
umieścić w sekcji <body> LI. 

Teraz napiszemy skrypt JS, który pozwoli 
na zliczenie zaznaczonych elementów na 
formularzu EJ (patrz następna strona). 

W pętli for deklarujemy zmienną i z war- 
tością 0, sprawdzamy, czy i ma mniejszą 
wartość niż liczba opcji zaznaczonych w for- 
mularzu i wewnątrz pętli zwiększamy o 1 
wartość zmiennej przechowującej informa- 
cję o zaznaczonych elementach. 

W kodzie znajduje się również funkcja oraz 
kilka innych bardziej zaawansowanych ele- 
mentów. Zapisujemy dokumenty i urucha- 
miamy stronę. 


EJ <body> 


<form name="selectForm"> 


<upLivn>Ja2z</vpLivn> 
<option>Blues</option> 

15 <option>New Age</option> 
<option>Classical</option> 


<option>Opera</option> 
</select> 


</form> 


<label for-"typMuzyki">wybierz typ muzyki, który lubisz</labcl> 
<select id="typMuzyki” name="typMuzyki" multiple> 
<option selected>Pop</option> 


<button id="btn" type="button">Ile jest wybranych?</button> 
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[B| function jakDuzo(wskazObiekt) 4 
let ileZaznaczonych = 8; 
for (let i = 8; i < wskazObiekt.options.length; i++) ( 
if (wskazObiekt.options[i].selected) f 
ileZaznaczonych++; 
1 


return ileZaznaczonych; 
1 
J 


const btn = document.getElementById( 'btn'); 


btn.addEventListener('click', () => ( 
const typMuzyki = document.selectForm.typMuzyki; 
15 console.log( Zaznaczyłeś dokładnie $(jakDuzo(typMuzyki )) opcji(ę).");| 
M: 


Po uruchomieniu strony zobaczymy for- 
mularz [4]. Możemy klikać na poszczególne 
dostępne w nim opcje. W celu zaznaczenia 
więcej niż jednego elementu musimy trzy- 
mać wciśnięty klawisz [dr]. 

Klikamy na przycisk Ile jest wybranych?. 
Odpowiedź będziemy mogli odczytać w kon- 


soli. Wciskamy więc kombinację klawi- 
szy []+ftj+(I) i z konsoli odczytujemy 
odpowiedź. 

Po wybraniu większej liczby elementów 
i kliknięciu na Ile jest wybranych? za każ- 
dym razem zostanie wyświetlony poprawny 
wynik []. Jest to możliwe dzięki pętli for. 


© Przyklad x + [c] 
ĆC  QOPlik| D;/JavaScript_KS/Przyklad.html 


Elements Console 


CZY 
© | tp © 


Zaznaczyłeś dokładnie 1 opcji(ę). 


Recorder h 


FH 


Filter 


Wybierz typ muzyki, który lubisz [New Age * 


Ile jest wybranych? 


v 


© Przyklad x + 
ĆC  OPlik | D:/JavaScript_KS/Przyklad.html 


[x a] Elements 
-] © |tp © 
Zaznaczyłeś dokładnie 1 opcji(ę). 

Zaznaczyłeś dokładnie 4 opcji(ę). |D| 


Console _ Recorder h Pe 


Filter 


Wybierz typ muzyki, który lubisz KEŻZCE 


Ile jest wybranych? 
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Pętla do ... while 
Pętla do ... while wykonuje się, dopóki podany 
warunek wyjścia nie będzie miał wartości false. 


do 
Instrukcje 
while (Warunek) ;| 


W przypadku tego rodzaju pętli instrukcje 
zostaną wykonane zawsze przynajmniej raz, 
zanim warunek wyjścia zostanie sprawdzony. 
Jeśli warunek będzie miał wartość logiczną 
true, pętla będzie wykonywana dalej, a je- 
żeli false, zakończy swoje działanie. Zatem 
warunek sprawdzany jest na samym końcu 
i zawsze instrukcje zostają wykonane przy- 
najmniej raz. 


let i = 6; 
do £ 
i +=1; 
console.log(i); 
j while (i < 6); 


JavaScript - hellojs5 v/ 


1 
2 
3 
ą 
5 
6 
i 


Finished in 1.286s] 


Jak widać w tym przykładzie, instrukcje 


wewnątrz bloku były wykonywane, 
dopóki warunek końcowy nie zwrócił fałszu 


let i = 6; 
do £ 
i += 1; 
console.log(i); 
) while (i == 108); 


JavaScript - hellojs6 + 


1 
[finished in 1.6275] 


Należy zawsze pamiętać przy tego typu 
pętli, że nawet gdy wynik testu logicznego 


od samego początku to fałsz, instrukcje 
zostaną wykonane jeden raz 


Pętla while 

W przeciwieństwie do pętli do ... while, 
w przypadku pętli while test logiczny wy- 
konywany jest już na wejściu do pętli. Jeśli 
więc zwróci on fałsz, nie zostanie wykonana 
żadna instrukcja wewnątrz pętli. 


let n = 8; 

let x = 6; 

while (n < 3) £ 
N++; 
X += n; 
console.log(n) 


1 


JavaScript - hellojs:6 */ 


1 
2 
3 
[Finished in 1.8365] 


Warunek wstępny został spełniony, więc pętla 


została zrealizowana i dopiero, gdy inkrementacja 
zwiększyła odpowiednio wartość n, opuściliśmy pętlę 


Welcome 
let n = 186; 
let x = 6; 
while (n < 18) 4 
N++; 5 
X += n; 
console.log(n) 


7 5 


JavaScript - hello.js:7 wv/ 


[Finished in 1.813s] 


W przypadku pętli while, gdy warunek wstępny 


nie zostanie spełniony, instrukcje nie zostaną 
WEWAWLOLEIE 


'Te podstawowe pętle i słowa kluczowe wystat- 
czą nam, abyśmy mogli pisać pierwsze skrypty, 
musimy jednak jeszcze poznać funkcje. 
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Welcome 

while (true) £ 

console.log( 'Nieskończoność! '); UWAGA NA NIESKOŃCZONE PĘTLE 
; Istnieje w programowaniu pojęcie nieskoń- 
czonej pętli - taka pętla to coś, czego zdecy- 
dowanie powinniśmy za wszelką cenę unikać. 
W zależności od programu wejście w taką 
pętlę może doprowadzić do zakończenia 
działania programu, a nawet do ponownego 
uruchomienia komputera. 
Jest to klasyczny przykład nieskończonej pętli 
- pętla będzie wykonywana, dopóki warunek 
true nie zmieni wartości na false, jednak 
kod instrukcji wewnątrz pętli nie umożliwia 
w żaden sposób wyjścia z takiej pętli. 
Uwaga! Zanim przetestujemy działanie tego 
przykładu na naszej maszynie, koniecznie 
zapiszmy wszystkie ważne dokumenty, gdyż 
może okazać się, że będzie konieczny restart 
komputera. 


> 


JavaScript - hellojs4 $B 
Nieskończoność! 
Nieskończoność! 
Nieskończoność! 
Nieskończoność! 
Nieskończoność! 
Nieskończoność! 
Nieskończoność! 
Nieskończoność! 
nieskończoność! 
Nieskuńc zunuść! 
Nieskończoność! 
Nicskończoność! 
Nieskończoność! 
*ieskończoność I 
< psknańczannść! 
1eskończoność! 
Nieskończoność! 
Nieskończoność! 
Nieskończoność! 
Nieskończoność! 
Nieskończoność! 
Nieskończoność! 


let x - 8; 
let 7 = 8; 
while (true) ( 


INSTRUKCJA BREAK console.log('1teracja pętli: ' + x); 
Xx += 1; 

Czasem pętle, które mogą być z += 1; 

wykonywane teoretycznie w nie- if (z saa 5 84:% ses 5) ( 

skończoność, są przydatne - na console.log('Opuszczam pętlę'); 

przykład do tego, żeby bez przerwy break; 


sprawdzać jakąś wartość. Możemy 
w takim wypadku skorzystać 
z instrukcji break, aby natychmiast 
opuścić taką pętlę. 


JavaScript - hellojs:8 w 


Tteracja pętli: 
Iteracja pętli: 
Iteracja pętli: 
Tteracja pętli: 
Iteracja pętli: 
Opuszczam pętlę 
[Finished in 1.8255] 


bwrpb SB 
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W e wcześniej podawanych przykładach 
używaliśmy już funkcji, teraz dowie- 
my się dokładniej, czym są i jak ich można 
używać. 

Zacznijmy od tego, że funkcję należy zdefi- 
niować lub zadeklarować. Zawsze odbywa 
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się to w ściśle określony sposób. Na początku 
używamy słowa kluczowego function, potem 
umieszczamy nazwę funkcji - korzystając z tej 
nazwy, będziemy wywoływać funkcję w dal- 
szej części skryptu. Następnie w nawiasie za- 
mieszczamy listę parametrów funkcji, które 
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oddzielamy przecinkami. Na koniec w nawia- 
sie klamrowym podajemy instrukcje, które 
mają być zrealizowane po wywołaniu funkcji. 


function kwadrat(liczba) £ 
return liczba * liczba; 


var" X>Y; 
RY 
y = kwadrat(x); 


"+b: 


console.log("x do kwadratu to : 


lavaScnipt - hellnj<7 w/ 


x dn kwadratu ta : 75 
[Finished in 1.8135] 


Oto prosty przykład funkcji obliczającej 
kwadrat podanej liczby [J. Funkcja kwadrat 
przyjmuje tylko jeden parametr. Wewnątrz 
funkcji mamy jedną instrukcję, która składa 
się ze słowa kluczowego return. Służy ono 
do zwracania konkretnej wartości funkcji. 
Parametr funkcji jest traktowany jako zmien- 
na lokalna. Funkcję wywołujemy, podając 
w kodzie jej nazwę oraz przekazując dokład- 


function silnia(n) £ 


if ((n ===) || (n === 1)) 
return 1; 

else 
return (n * silnia(n - 1)): 


console.log(silnia(5));| 


JavaScript - hellojsd + 
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[Finished in 1.6355] 


Funkcja może wywołać samą siebie, jak na przykład 


ta funkcja, która rekurencyjnie oblicza silnię 


ną liczbę parametrów, które są jej przypisa- 
ne. Tak więc w naszym przykładzie po wy- 
wołaniu funkcji z parametrem x, który ma 
wartość 5, wewnątrz funkcji ta wartość jest 
przypisana do parametru liczba, wykonane 
są instrukcje i poprzez słowo klucz return 
zwrócona jest wartość funkcji. Ta wartość 
w kodzie przypisana jest poza funkcją do 
zmiennej y. 


Gra w zgadywanie liczby 


celu ugruntowania wszystkich wia- 

domości zdobytych w tym rozdziale, 
napiszemy kod gry w JavaScripcie, w którą 
będziemy mogli grać w oknie przeglądarki. 
Podejdziemy do tego zadania tak jak pro- 
gramista - najpierw zapoznamy się z zada- 
niem, podzielimy je na etapy i przejdziemy do 
realizacji. 
Musimy napisać prostą grę typu „zgadnij 
liczbę”. Gra powinna wybierać losową licz- 
bę między 1 a 100. Zadaniem gracza jest 
odgadnąć tę liczbę w najwyżej 10 próbach. 
Po każdej próbie gracz powinien otrzymać 
informację, czy zgadł, czy też nie i - jeśli nie 
odgadł - powinien dodatkowo dowiedzieć 
się, czy liczba, którą podał, miała wartość za 


małą, czy za dużą. Ponadto gracz powinien 
widzieć wybrane poprzednio przez siebie 
liczby. Gra ma się zakończyć, gdy gracz poda 
prawidłową odpowiedź lub gdy wykorzysta 
ostatnią próbę. Po zakończeniu gry gracz po- 
winien móc rozpocząć ją od nowa. 

Bardzo często możemy się spotkać z podob- 
nym lub mniej precyzyjnym opisem zadania. 
Bardzo ważne jest w wypadku realizacji tego 
typu zadań to, aby już na samym początku 
jasno określić wszelkie wymagania - dzięki 
temu będziemy mogli dość dokładnie oszaco- 
wać czasochłonność i opłacalność realizacji. 
Warto rozbić taką treść na proste kroki i - 
można powiedzieć - przekształcić na sche- 
mat blokowy. 
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Welcome Przyklad.html . zgadywanie_liczby.html 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Zgadnij liczbę</title> 


<style> 
html £ 
font-family: sans-serif; 
) 
body t 
width: 50%; 


max-width: 880px; 
min-width: 488px; 
margin: 8 auto; 
) 
„.lastResult ( 
color: white; 
padding: 3px; 
1 
</style> 
</head> 
<body> 
<h1l>zgadnij liczbę</h1> 
<p>Program wybrał liczbę od 1 do 1688. Sprawdź, czy uda Ci się ją odgadnąć w 
mniej niż 16 prób. Otrzymasz podpowiedzi o tym, czy zgdywana przez Ciebie 
wartość jest zbyt dsuza lub zbyt mała</p> 
<div class="form"> 
<label for="guessField">Wprowadź liczbę: </label> 
<input type="text" id="guessField" class="guessField"> 
<input type="submit" value="Submit guess" class="guessSubmit"> 
</div> 
<div class="resultParas"> 


<p class="guesses"></p> 
<p class="lastResult"></p> 
<p class="lowOrHi"></p> 
</div> 
38 <script type="text/javascript" src="zgadywanie. js”></script> 
</body> 
</html> 


JavaScript - hello.js8 %/ 
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Schemat gry 
Wybierz losową liczbę z zakresu od 1 
do 100. 


Zapisz numer próby, którą podejmuje 
gracz. Zacznij od 1. 


Podaj graczowi sposób, w jaki może od- 
gadnąć tę liczbę. 


Gdy padnie odpowiedź, zapisz ją, aby 
użytkownik mógł widzieć swoje po- 
przednie próby. 


Sprawdź, czy padła prawidłowa odpo- 
wiedź. 


Jeśli tak: 

A Wyświetl gratulacje. 

B Zablokuj możliwość podawania dal- 
szych odpowiedzi (to mogłoby namie- 
szać w grze). 

C Udostępnij narzędzie, którym gracz 
może ponownie uruchomić grę. 


Jeśli nie padła prawidłowa odpowiedź 

i graczowi pozostały jeszcze próby: 

A Poinformuj o nieprawidłowej odpo- 
wiedzi. 

B Pozwól podać kolejną odpowiedź. 

C Zwiększ numer próby gracza o 1. 


Jeśli nie padła prawidłowa odpowiedź i gra- 

czowi nie pozostała już ani jedna próba: 

A Poinformuj o zakończeniu gry. 

B Zablokuj możliwość podawania dal- 
szych odpowiedzi (to mogłoby namie- 
szać w grze). 


€ Udostępnij narzędzie, którym gracz 
może ponownie uruchomić grę. 


Gdy gra uruchomi się ponownie, upew- 

nij się, że dane z poprzedniej gry zostały 
całkowicie usunięte i interfejs powrócił do 
stanu początkowego. Przejdź do punktu 1. 


Zaczynamy pracę nad grą 

Mając taką rozpiskę, możemy przystąpić do 
zamiany jej na kod źródłowy, który zrealizuje 
nasze pomysły. 

W celu ułatwienia sobie zadania warto pobrać 
z KS$+ (ksplus.pl) gotowy kod HTML strony 
dla gry - zgadywanie_liczby.htmi 71. 
Skrypt JS należy umieścić w tym samym fol- 
derze co plik HTML i nadać mu nazwę zga* 
dywanie js. 

Otwieramy plik JS w Atomie i jednocześnie plik 
HTML w przeglądarce. Plik ten zawiera nagłó- 
wek, akapit z instrukcją gry i jeszcze niedziała- 
jący) formularz do wprowadzania odpowiedzi. 


Q Pik | DylavaScnipt_X5/zgadywanie_kczby.htmi 


Zgadnij liczbę 


Program wybrał liczbę od 1 do 100. Sprawdź, czy uda Ci się ją 
odgadnąć w mniej niż 10 prób. Otrzymasz podpowiedzi o tym, czy 
zgdywana przez Ciebve wartość jest zbyt duża lub zbyt mała 


Wprowadź liczbę |123 Wyślij odpowiedź 


sk GSZOEmMO 


Zaczynamy od przygotowania sobie wszyst- 
kich zmiennych, z jakich będziemy korzystać. 
Ta część kodu E] definiuje zmienne i stałe 
niezbędne do pracy programu. 

Zmienne są pojemnikami na wartości takie 
jak liczby czy ciągi znaków. 

Zmienną tworzymy, używając słowa kluczo- 
wego let (lub vab, po którym wpisujemy 
nazwę tej zmiennej. 


[Mvar randomNumber = Math.floor(Math.random() * 188) + 1; 


const guesses = document.querySelector( 
const 
const 
const guessSubmit = 
const guessField = 
let guessCount = 1; 
let resetButton; 


Welcome Przyklad.htm 


.„.guesses' ); 
lastResult = document.querySelector('.lastResult"' ); 
lowOorHi - document.querySelector( '.lowOrHi'); 


document.querySelector('.guessSubmit"' ); 
document .querySelector('.guessField'); 


Następnie możemy tej 
-| zmiennej przypisać war- 
tość. Robimy to za pomocą 
znaku równości (©), po któ- 
rego prawej stronie wpisu- 
jemy wartość. 

Stałe natomiast mają za za- 
danie przechować dane, 
które mają się nie zmieniać. 
Stałe tworzy się podobnie 
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jak zmienne, ale przy użyciu słowa kluczo- 
wego const. W naszym przykładzie użyjemy 
stałych do przechowania odnośników (refe- 
rencji) do poszczególnych części naszego 
interfejsu użytkownika. Tekst w niektórych 
z nich może w którymś momencie ulec zmia- 
nie, jednak bloki kodu HTML, do których od- 
noszą się nasze stałe, pozostaną niezmienne. 


W naszym przykładzie 

m Pierwsza zmienna - randomNumber [7 - 
ma przypisaną losową liczbę z zakresu od 1 do 
100 wybraną przez matematyczny algorytm. 
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m Każda z trzech kolejnych stałych zawiera re- 
ferencje do konkretnych paragrafów w kodzie 


<div class="resultParas"> 


<p 
DPR 
<p 
</div> 


class="guesses"></p> 
class="lastResult"></p> 
class="lowOrHi"></p> 


HTML. Zostaną one użyte do wstawienia od- 
powiednich wartości w dalszej części kodu [7]. 
m Następne dwie zmienne mają za zadanie 
przechować referencje do pola tekstowego 
i przycisku zatwierdzania odpowiedzi. Przy- 


<div class="farm"> 


<label for-"guessField">Wprowadź liczbę: </label> 


<input type="text" id="guessfield" class="guessField"> 


<input type="submit" 
</div> 


value="wyślij odpowiedź” class="guessSubmit"> 


dadzą się do wprowadzania 
i zatwierdzania kolejnych od- 
powiedzi gracza [H. 

m Dwie ostatnie zmienne 
zawierają kolejno: wartość 


domyślną 1 (tej zmiennej 


tunction checkGuess() 4 
var userGucss - Number(gucssField.valuc); 


if (guessCount === 1) ( 


użyjemy do liczenia prób 
odpowiedzi) oraz referen- 
cję do przycisku „reset” (co 
prawda jeszcze nie istnieje, 


guesses.lexlCunLenL = 'Poprzedniu wprowadzone liczby: '; 
p ale niebawem się to zmieni). 
guesses.textLontent += userGueSS + z Ponieważ zamierzamy Wy- 
konywać różnego typu 
if (userGuess === randomNumber) 4 operacje, będziemy potrze- 


lastResult.textContent = 


lastResult.style.hackgroundCalor = 'green'; 
loworHi .texttontent = e 
setGameOver( ); 

|) else if (guessCount === 18) 4 
lastResult.textContent = '!!!Koniec gry!!!' 
setGameOver( ); 

) else £ 
lastResult.textContent - 'Źlel '; 
lastResult.style.backgroundColor = 'red'; 
if(userGuess < randomNumber) ( 

lowOrHi.textContent = 'Zbyt mała liczba!'; 


) else if(userGuess > randomNumber) ( 
34 lowOrHi .textContent = 


guessCuurnl++; 
guessField.value = ''; 
guessField.tocus( ); 


JavaScript - hello.js8 */ 


'Gratulacje! Zgadłeś'; 


'Zbyt duża liczba! 


bować funkcji, która będzie 
sprawdzała każdą odpo- 
wiedź gracza i w odpowied- 
ni sposób reagowała. 

Jest to już zdecydowanie bar- 
dziej rozbudowana funkcja 
[, która zawiera przykład 
wykorzystania instrukcji 
warunkowych. Omówimy 
ją krok po kroku. 

m Pierwsza linia w ciele 
funkcji deklaruje zmienną 
userGuess i przypisuje 
jej wartość równą obecnej 
wartości wpisanej do pola 
tekstowego. Jednocześnie 
weryfikujemy tę wartość 
wbudowaną metodą Num- 
ber(), aby mieć pewność, 
że wartość ta jest na pewno 
liczbą. 
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m Następnie jest nasz pierwszy blok kodu 
z instrukcją warunkową. Instrukcja warun- 
kowa pozwala nam uruchamiać inne części 
kodu w zależności od tego, czy dany waru- 
nek zostanie spełniony, czy też nie. Najprost- 
sza instrukcja warunkowa rozpoczyna się 
słowem kluczowym if, po którym następują 
nawiasy zwykłe i dalej nawiasy klamrowe. 
Wewnątrz nawiasów zwykłych umieszczamy 
nasz warunek. 

Jeśli warunek jest spełniony (wartość true), 
uruchamiany jest kod wewnątrz nawiasów 
klamrowych. Jeżeli nie (wartość false) - kod 
w nawiasach klamrowych nie jest uruchamia- 
ny i przechodzimy do następnej części kodu. 
W tym przypadku następuje sprawdzenie, czy 
zmienna guessCount jest równa 1 (to znaczy 
czy jest to pierwsza odpowiedź gracza). Jeśli 
tak jest, zmieniamy tekst paragrafu (akapitu), 
w przeciwnym wypadku - nie. 


jest za mała lub za duża (paragraf lowOr- 
Hi) i uruchomić funkcję setGameOver(), 
o której dowiemy się więcej za chwilę. 

e Bezpośrednio pod właśnie opisaną instruk- 
cją rozpoczynamy kolejny test, używając 
struktury else if()f ). Sprawdza ona, czy 
obecna próba odpowiedzi gracza jest 
ostatnią równą 10). Jeśli tak jest, program 
wykona te same operacje co poprzednio, 
z tą różnicą, że zamiast gratulacji ma wy- 
Świetlić napis „Koniec gry”. 


) else if (guessCount === 18) £ 


lasUResulL. LexLCuntent = 
setGameOver ( ) ; 


'I!!Koniec gry!!!'; 


e Ostatnia z instrukcji warunkowych ma 
postać else f ] i zawiera kod uruchamiany 
tylko w przypadku, gdy żaden z poprzed- 
nich warunków nie został spełniony (czyli 
gdy gracz nie odgadł liczby, ale pozostały 


function checkGuess() 
var userGuess = Number(guessField.value); 


if (guessCount === 1) £ 


guesses.textContent - 'Poprzednio wprowadzone liczby: '; 


) 
[|] guesses.textContent += userGuess + ' *; 


mu jeszcze próby). W tym przy- 
padku informujemy go, że się 
pomylił i przeprowadzimy ko- 
lejne sprawdzenie, czy wpisana 
przez niego liczba była większa 
czy mniejsza od prawidłowej 


m Linia 18 [-] dodaje aktualną wartość zmien- 

nej userGuess na końcu akapitu guesses 

oraz białą spację, aby oddzielić od siebie ko- 
lejne odpowiedzi. 

m Następna część kodu (linie 20-36) wyko- 

nuje kilka operacji sprawdzenia: 

e Pierwsza instrukcja if()f ) sprawdza, czy 
odpowiedź gracza jest równa wartości 
zmiennej randomNumber wybranej lo- 
Sowo na początku naszego programu. Jeśli 
tak jest, oznacza to, że gracz odpowiedział 
poprawnie i gra jest zakończona. Możemy 
zatem pogratulować zwycięzcy, używając 
zielonego koloru, wyczyścić zawartość 
akapitu informującego, czy podana liczba 


odpowiedzi. Oczywiście wy- 
świetlony zostaje odpowiedni komunikat. 


) else ( 
"Źle! '; 
lastResult.style.backgroundColor = 


lastResult.textContent = 
'red'; 
if(userGuess < randomNumber) 4 

lowOrHi .textContent = 
) else if(userGuess > randomNumber) £ 


lowOrHi.textContent = 'Zbyt duża liczba! ' 


'Zbyt mała liczba!" 


b 


. 


if (userGuess === randomNumber) 4 
lastResult.textContent = 'Gratulacje! Zgadłeś '; 
lastResult.style.backgroundColor = 
lowOrili.textContent - ''; 


'green'; 


setGameUver (); 


m Trzy ostatnie linie naszej funkcji check- 
Guess()f ] (linie 38-40) przygotowują grę 
do przyjęcia kolejnej odpowiedzi. W tym 
celu zostaje dodane 1 do wartości zmiennej 
guessCount, aby „zużyć” jedną próbę gra- 


guessCountH; 
guessfield.value = ''; 
guessField.focus();: 
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cza (++ oznacza zwiększenie o 1 - inkremen- 
tację), wyczyszczone zostaje pole formularza, 
aby gracz wygodnie mógł wprowadzić swo- 
ją następną odpowiedź, i ustawiony zostaje 
w tym polu oczekujący kursor. 


Obsługa zdarzeń 

Mimo że poprawnie zadeklarowaliśmy funk- 
cję checkGuess(), póki co nie wykona ona 
żadnej akcji. Powód jest bardzo prosty - nie 
mamy miejsca w kodzie, gdzie moglibyśmy 
wywołać naszą funkcję. Z naszych ustaleń 
wynika, że funkcja ta ma zostać wywołana 
po naciśnięciu przycisku Wyślij odpowiedź 
na stronie w przeglądarce. Więc musimy 
wywołanie funkcji zrealizować z wykorzy- 
staniem zdarzenia (event). Zdarzenie jest 
tym, co dzieje się w przeglądarce (na przy- 
kład kliknięcie przycisku, załadowanie stro- 
ny, odtwarzanie filmu itd.) i czego możemy 
użyć w celu wywołania konkretnego bloku 
kodu. Konstrukty, które „nasłuchują”, czy 
miało miejsce zdarzenie, nazywane są de- 
tektorami zdarzeń (ang. event listeners), 
a wywoływane w odpowiedzi na nie blo- 
ki kodu - modułami obsługi zdarzeń (ang. 
event handlers). Do naszego skryptu poza 
funkcją dodajemy linię: 


gadniemy właściwą odpowiedź lub wykorzy- 
stamy wszystkie próby odpowiedzi, gra po- 
winna zostać przerwana, ponieważ jak dotąd 
nie zdefiniowaliśmy funkcji setGameOverQ, 
która ma zostać wywołana w przypadku za- 
kończenia gry - tak się nie stanie. Dodajmy 
zatem brakującą część kodu, aby nasza gra 
zyskała wszystkie funkcjonalności. 


k | D;/JavaScript KS/zgadywanie Jiczby.html er OTPĘRZCnA 


Zgadnij liczbę 

Program wybrał liczbę od 1 do 100. Sprawdź, czy uda Ci się ją 
odgadnąć w mniej niż 10 prób. Otrzymasz podpowiedzi o tym, czy 
zgdywana przez Ciebie wartość jest zbyt duża lub zbyt mała 


Wprowadź liczbę |22 Wyślij odpowiedź 


Poprzednio wprowadzone liczby: 2 23 123 213131 2 1 432 33 44 
33 22 44 22 22 


Zbyt duża liczbal 


Funkcja setGameOver() 

Poniżej naszego detektora zdarzenia zade- 
klarujemy kolejną funkcję setGameOver, 
która pozwoli na obsługę zakończenia gry 
i nie tylko. 

m Pierwsze dwa wiersze wyłączają wpro- 
wadzanie tekstu formularza i przycisk, 
ustawiając ich właściwość zablokowania 


na true. Jest to konieczne, ponieważ 


43  guessSubmit.addEventlistener('click', checkGuess); | gdybyśmy tego nie zrobili, użytkow- 


nik mógłby przesłać więcej zgadywań 


W ten sposób dodaliśmy detektor zdarzenia 
do przycisku guessSubmit. Jest to metoda, 
która ma dwie dane wejściowe (zwane ar- 
gumentami) zapisane w formie ciągu zna- 
ków: typ zdarzenia, które ma zajść (w tym 
przypadku click - czyli kliknięcie kursorem), 


po zakończeniu gry, co nie byłoby zgodne 
z wymaganiami. 

ze Następne trzy wiersze generują nowy 
element <button>, ustawiają jego etykietę 
tekstową na „Rozpocznij nową grę!” i dodają 
go na dole naszego istniejącego kodu HTML. 


oraz fragment kodu, który ma zostać 
uruchomiony poprzez to zdarzenie 
(funkcja checkGuessO). Warto rów- 
nież zwrócić uwagę, że nasza funkcja 
checkGuess nie ma żadnych parame- 
trów wejściowych, więc możemy ją 
wywołać, podając tylko jej nazwę, po- |-: 
mijając pusty nawias. 

Zapisujemy i odświeżamy swój kod. 
Powinien już prawie w pełni działać. 


guessSubmit.addEventListener('click', checkGuess); 


function setGameOver() f 
guessField.disabled = true; 
guessSubmit.disabled = true; 
resetButton - document.creatcElement( 'button' ); 
resetButton.textContent = 'Rozpocznij nową grę! '; 
document .body.appendChild(resetButton) ; 


resetButton.addEventListener( 'click', resetGame); 


Pozostała jeszcze jedna kwestia: gdy od- 
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function setGameOver() £ Ten dość długi blok kodu EJ całkowicie re- 
guessField.disabled = Lrue; setuje wszystko do stanu, w jakim było na 
guessSubmit.disabled = true; początku gry, więc gracz może spróbować 


jeszcze raz. To: 
m Ostatnia linia ustawia detektor zdarzeń na 
naszym nowym przycisku, dzięki czemu po « Witos ustawia guessCount do 1. 
kliknięciu na niego wywoływana jest funkcja 

resetGame(). function resetGame() ( 


guessCount - 1; 


resetRutton = document .createFlement( 'huttan'); 


resetButton.textContent = 'Rozpocznij nową grę! '; 


document . body .appendChi ld(resetButton) ; 2 a” wszystkie akapity informacyjne 
Funkcja resetGame() 
W poprzedniej funkcji wywołujemy funk- Usuwa przycisk resetowania z naszego 
cję resetGame, jednak jeszcze nigdzie jej nie kodu [H. 


zadeklarowaliśmy - musimy teraz to zrobić 
Włącza elementy formularza oraz czyści 


resetButton.addEventListener('click', resetGane); 


i ustawia kursor w polu tekstowym [£]. 


i dodać do niej instrukcje, które pozwolą nam Usuwa kolor tła z akapitu - lastResult 
obsłużyć poprawnie zakończenie naszej gry. a 
function setGameOver() f |A| 


guessField.disabled = true; 

guessSubmit.disabled = true; 

resetButton - document.crcatcElement( 'button' ); 

resetbutton.textlontent = 'Kozpocznij nową grę! '; 

document .body.appendChild(resetButton); 

resetButton.addEventListener( 'click', resetGame); 
1 


< function resetGame() £ 


guessCount - 1; 


var resetParas = document.querySelectorAl1('.resultParas p'); 
for (var i - 8 ; i £ resetParas.length ; i++) (£ 
resetParas[i].textContent = *'; 


ł 


resetButton.parentNode.removeChild(resetButton); || 


guessField.disabled = false; 
guessSubmit.disabled — false; 
guessrield.value = *''; 

guessField.focus( ); 


lastResult.style.backgroundcolor = 'white'; [Ą 


randomiiumher = Math.flonr(Math.random() * 188) + 1; 


732 ) 
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podstawy JavaScriptu 


DODATKOWE ZMIANY W KONSOLI 


Możemy również na tym etapie poba- 
wić się naszą grą od strony konsoli, 


wprowadzając różnego typu polecenia, 
które w trakcie rozgrywki będą zmieniały 
parametry naszej gry. Możemy zmieniać 
wygląd całej witryny dzięki temu, że każdy 
element ma zastosowane style CSS. 


G OPlk| DylavaScnipt_KS/zgadywarre_iczby.htmi 


R ŚJ  Fement 
Zgadnij liczbę E © w: © 
Program wybrał liczbę od 1 do 100. Sprawdź, czy uda C: się ją 
odgadnąć w mniej niż 10 prób. Otrzymasz podpowiedzi o tym, czy 
zgdywana przez Ciebie wartość jest zbyt duża lub zby! mała 


wprowadź liczbę. | | Wyślij odpowiedź | 


Poprzednio wprowadzone liczby: 3 4 5 


Zbyt mała liczbal 


Q Plik | Ds/JavaScript KS/zgadywanie_liczby.html 


Zgadnij liczbę 


Program wybrał liczbę od 1 do 100. Sprawdź, czy uda Ci się ją 
odgadnąć w mniej niż 10 prób. Otrzymasz podpowiedzi o tym, czy 
zgdywana przez Ciebie wartość jest zbyt duża lub zbyt mała 


Wprowadź liczbę: | 


] [Wyślij odpowiedź | 


Poprzednio wprowadzone liczby: 3 4 5 


Zbyt mała liczbal 


Q Pik | Dy/JavaScnpt_KS/zgadywanie hczby.htmi 


Zgadnij liczbę 

Program wybrał liczbę od 1 do 100 Sprawdż, czy uda Ci się ją 
adgadnąć w mniej niż 10 prób Otrzymasz podpowiedzi o tym, czy 
zgdywana przez Ciebie wartość jest zbył duża lub zbyt mała 


Wprowadź liczbę: | [_Wyślą odpowiedź 


Poprzednio wprowadzone 
liczby: 345 


Zbyt mała liczbal 
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Rozpoczynamy naszą grę i otwieramy 
konsolę 


Następnie wprowadzamy polecenie: 
guesses.style.backgroundColor = 
"yellow"; 


Tło poprzednio wpro- 

wadzonych liczb 
zostanie oznaczone 
kolorem żółtym. W myśl 
tej zasady możemy do- 
wolnie dostosować wy- 
śgląd każdego elemen- 
tu do naszych potrzeb 
- wystarczy znajomość 
stylów CSS. 


Recceder h 


GR BJ] Fiements Recorder £ 


LO e 


> guesses.style.beckgrountColor = 


Console 
top 7 Filter 
"yellow" ; 
"yellow" 


>] 


R A Elements Recorder k 
M © © 


> guesses.style.backgrounoloior = 'yellou'; 


"y€110u" 


Console Performanq] 


top * Filter 


> guesses.style.DOxSNAGOW » '3px Zpx GpX DIACE'; 
*39x 3px Gpx bleck" 

> guesses.style.padding = '100x'; 
*18px' 

> guesses.style.+ontSize » "2005'; 
*200%' 

> 
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Generuje nową liczbę losową Mi, 
dzięki czemu nie zgadujemy ponow- 
nie tej samej liczby. 72 


randomNumber = M 


Lh.flovr(Malh.randum() * 1808) + EJ F | 


W tym momencie uzyskujemy w pełni 
działającą (prostą) grę - gratulacje! 


D:/JavaScnipt_KS/zgadywarse_kczby.htmi e * 


= m o M 


Zgadnij liczbę 

Program wybrał liczbę od 1 do 100. Sprawdź, czy uda Ci się ją 
odgadnąć w mniej niż 10 prób. Otrzymasz wiedzi o tym, czy 
zgdywana przez Ciebie wartość jest zbyt duża lub zbyt mała 
Wprowadź liczbę: 

Poprzednio wprowadzone liczby: 55 77 88 84 80 78 


Gratulacjal Zgadłeś 


Rozpoczną nową grę! | 


Zgadnij liczbę 

Program wybrał liczbę od 1 do 100. Sprawdź, czy uda Ci się ją 
odgadnąć w mniej niż 10 prób. Otrzymasz podpowiedzi o tym, czy 
zgdywana przez Ciebie wartość jest zbyt duża lub zbyt mała 
Wprowadź liczbę 

Poprzednio wprowadzone liczby: 55 44 33 22 11 454 23222 
HiKor TA LLL 

Zbyt mała liczbał 


| Rozpocznij nową gręl | 


OSZUKUJEMY W GRACH 


Dzięki temu, że z poziomu konsoli mamy 
dostęp do całego skryptu i poszczególnych 
zmiennych, możemy oszukiwać w grach. 
W ten sam sposób można bez problemu 
oszukiwać w wielu przeglądarkowych 
grach. 


Można oszukiwać na wiele sposobów, 

po pierwsze wiemy, że gra pozwala 10 
razy odgadnąć liczbę - możemy dać sobie 
jednak więcej szans. 


Zmienna guessCount przechowuje 
informacje o tym, ile prób wykonali- 
śmy. Wyświetlamy jej obecną wartość po 
3 próbach. < undefined 
> guessCount 
Ma ona wartość 4, co a 
jest poprawne, gdyż [IM 
zaczynamy z pozio- 
mu 1. W celu do- > guessCount 
dania sobie więcej «4 
szans wystarczy, > ERZE 
że ponownie NSS 
w trakcie rozgryw- IIWOPOMGNE 
ki przypiszemy jej > 
wartość 1. 


W ten sposób możemy zgadywać, ile 

tylko razy chcemy. Jeśli jednak zależy 
nam na jak najszybszym zwycięstwie, 
wystarczy sprawdzić, jakiej liczby szuka- 
my sa przechowywana > randomNumber 
jest ona w zmiennej ran- = 
domNumber. 


Odczytaliśmy, że wartość szuk; 
liczby to 88 - wystarczy podać ją 
rozwiązanie i od razu wygramy. 


© 7 | Dylmańcęe Cuzzadynawe kczżyktoń 


Zgadnij liczbę 


Program wytrz sczbę od 1 do 100 Sprawdz. czy uda O: zę ją 
w miej m2 10 prób, Otrzymasz podpowądzi © bym 
zgdywama przez Gstio wartość post ZD: Gaża vb zbyć maka 


Werowań? izbę 


Poprzednio wprowadzone 
liczby: 88 


Oczywiście nie uda nam się w każdej 
grze i skrypcie tak łatwo wprowadzać 
modyfikacji, wystarczy, że kod będzie 
przetwarzany po stronie serwera lub 
będą zakodowane konkretne wartości 
i już nie będziemy mogli uzyskać przewagi 
w prosty sposób. 


JAVASCRIPT, HTML, CSS, PHP, WORDPRESS 


79 


80 


adam1l3zajacigmail.com 


Własna aplikacja 
webowa w JS 


Znając już podstawy, możemy przejść do nieco bardziej 
zaawansowanych elementów i funkcjonalności JavaScriptu. 
Zobaczmy krok po kroku, jak stworzyć aplikację webową, 
która będzie wyświetlała pogodę dla dowolnego miasta 


na świecie 


Własna aplikacja pogodowa 


tym projekcie skupimy się na tym, aby 
stworzyć w pełni funkcjonalną aplika- 
cję webową. Będzie ona miała pole teksto- 
we - po wpisaniu w nie nazwy dowolnego 
miasta na świecie otrzymamy informację 
o aktualnej pogodzie dla tego miasta. 
Zaczynamy od określenia w kilku punktach, 
co chcemy osiągnąć. 
m Musimy przygotować dokument HTML, 
który pozwoli na wyświetlanie niezbędnych 
danych. 
m Musimy dostosować style CSS do naszej 
aplikacji. 
m Musimy dodać kod JavaScript, który będzie 
uwzględniał: 
e obsługę wprowadzania przez użytkownika 
danych tekstowych, 
e wyszukiwanie danych pogodowych dla 
wskazanego przez użytkownika miasta, 
e interpretację danych z serwera zewnętrznego, 
e prezentację tych danych, 
e obsługę błędów - na przykład brak poda- 
nego miasta w bazie lub niepodanie war- 
tości typu tekst. 
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Aplikacja pogodowa 


Podaj nazwę miejscowości er 


Madrid ©© 


197 


Warsaw © 


Sydney © 


157 


26" 


Wszystko do tej pory wygląda dość podobnie 
do przykładu z grą w zgadywanie z rozdzia- 
łu piątego, jednak jest kluczowa różnica - 
musimy pobrać dane pogodowe z serwera 
zewnętrznego. Zrobimy to za pomocą API 
i requestu (zapytania) AJAX. Zacznijmy więc 
od tego pierwszego, a tym drugim zajmiemy 
się na dalszym etapie projektu. 
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CZYM JEST API 


API (Application Programming Interface), 
czyli interfejs programowania aplikacji. 
Jest to przede wszystkim specyfikacja wy- 
tycznych, jak powinna przebiegać interak- 
cja między komponentami programowymi. 
Implementacja API jest zestawem rutyn, 
protokołów i rozwiązań informatycznych 
do budowy aplikacji. Dodatkowo API może 
korzystać z komponentów graficznego 
interfejsu użytkownika. Dobre API ułatwia 
budowę oprogramowania, sprowadzając 
ją do łączenia przez programistę bloków 
elementów w ustalonej konwencji. 

Definiuje się je na poziomie kodu źródło- 
wego dla składników oprogramowania, 
na przykład aplikacji, bibliotek, systemu 
operacyjnego. Zadaniem interfejsu pro- 
gramowania aplikacji jest dostarczenie 
odpowiednich specyfikacji podprogra- 
mów, struktur danych, klas obiektów i wy- 
maganych protokołów komunikacyjnych. 
Definicja API może być niezależna od jego 


Wybieramy odpowiednie API 

W naszym projekcie potrzebujemy API z da- 
nymi pogodowymi. Musimy więc znaleźć 
dostawcę, który pozwoli nam wykorzystać 
dane pogodowe do naszej aplikacji. Na 
szczęście istnieje kilku różnych dostawców 
do tworzenia aplikacji pogodowych. Więk- 
szość z nich oferuje bezpłatny pakiet wraz 


implementacji. Co więcej, istnieją API 
zdefiniowane w sposób niezależny od 
danej platformy (systemu operacyjnego, 
języka programowania), które można 
wygenerować dla specyficznej platformy. 
Takie interfejsy definiuje się, używając 
zwykle języków ich opisu. 

Jednym z typów API, które są szerzej 
znane, są API webowe (zwane też inter- 
netowymi). 

Jest to rodzaj API, w których funkcje 
są udostępniane jako zasób w sieci. 
Bieżące wersje systemów API webowych 
pozwalają w bardzo łatwy sposób inte- 
grować informacje z sieci z aplikacjami, 
poszerzając ich funkcje lub umożliwiając 
współdziałanie (na przykład z sieciami 
społecznościowymi). 

Właśnie z takiego API musimy skorzystać 
w naszym projekcie - ma to być API we- 
bowe, które pozwoli nam na integrację 
danych z naszą aplikacją. 


z subskrypcjami płatnymi, które różnią się 
ceną w zależności od usług i funkcji. 

Na stronie rapidapi.com/search/wea- 
ther znajdziemy pełny wybór API związa- 
nych z pogodą wraz z informacjami, które 
są płatne, a które nie są. Możemy również 
przeglądać pozostałe kategorie API - jest ich 
naprawdę wiele. 


[R 
Search: 


Cwegaws 


Weather APis 
r e best pa 


Open weatner Map Visuat Crossing Wosthor 


WeatnerAPLccn 
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własna aplikacja webowa w JS 


Zdecydujemy się na OpenWeather- 
Map, jest to jedno z najpopularniej- 
szych darmowych API. OpenWeather 
opisuje siebie jako grupę ekspertów IT 
i naukowców zajmujących się danymi, 
którzy od 2014 roku zajmują się anali- 


zą danych pogodowych. Dla każdego ańd IB x 
. . [| Wenihze Verified w 
punktu na Ziemi OpenWeather zapew | |... wwa wom 20% GZ » 


nia wiarygodne historyczne, bieżące 


Open Weather Map sia ueSt5 you CAN QEt W... ty 


Get weather and weather 
forecasts for nęfryipie cities. SPIE : ydyśz ow 10. jg 


GET Current Weather Data P 
GET Climate forecast for 30 days Ve 


GET 5 day / 3 hour forecast data 


i prognozowane dane pogodowe za 
pośrednictwem interfejsów API. 


Uzyskanie API key 

W przypadku praktycznie każdego API ko- 
nieczne jest uzyskanie specjalnego klucza, któ- 
ry potrzebny będzie do odebrania odpowiedzi 
z serwera zewnętrznego. W przypadku Open- 
WeatherMap API musimy dokonać rejestracji. 


Przechodzimy do witryny o adresie 
home.openweathermap.org/users/ 
sign_up i rejestrujemy się. 


Guide API Dashboard Our Initiatives 


Marketplace 


Pricing Maps 


Create New Account 


[aj 
"rz gazy” * śaymai com 


we wf use information you provided for manag 


administration purposes, and for keeping you inform 


Następnie w naszej skrzynce e-mail 
otwieramy wiadomość weryfikacyjną 
i klikamy na Verify your email. 


OpenWeather 


Dear Customer 
Thank you for choosing OpenwealherMapi 


Please confirm your email address to help us ensure your account is always 


protected 


Po chwili otrzymamy kolejną wiado- 

mość, tym razem będzie zawierała ona 
nasz unikalny API key (klucz API) niezbędny 
do wysyłania zapytań do serwera. 


OpenWeather 


Dear Customer 


Thank you for subscribang to Free OcenwWealnerMapl 


AP! key 

- Your API kcy s 39422011 

- Within ne next coupie of hours, it wil be sctwatod and ready to use 
- You can later create more API keys on your accouni age 

- Please. always use your API key in each API call 


Endpont 

Please, use the endpont ap. 
- Example of API call 
GNLOPENWNGINErmap.org/dala/2 weather?9=LODGOO0 KAAPPID= 


ihermep.or9 for your API calls 


Useful links 

API documentation htips /oparweatnermao ory/ąpi 

Details of your plan bitos/orenweathermao org/pnce 

Please, note that 16-davs dafy forecasi and History API are not available tor 
Free subscnbers 


W ramach naszego darmowego klucza 
otrzymamy status Free. Daje on nam moż- 
liwość wykonywania 60 zapytań na minutę. 
W celach edukacyjnych jest to zupełnie wystar- 
czające. W ramach tego konta mamy dostęp do 


Free Startup Developer 
30 GBP monm 140 GBP: monit 
Price is fixed, no otner niaden 
costs 04 API k 
(VAT is not inełuded) 
API calts 60 caliz'manute 600 czilizmnute 3,000 calismnyle 
1,000,000 10,000,000 100.000.000 
callsmerz! <allsmonm Galis'monih 


Profes 


370 GB 


30.000 calls 


1,900,000,00! 
calistmontt 
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Free Startup 
30 GBP: month 

Price is fixed, no other hidden 

costs Gel API key Subscribe ) 

(VAT is not included) 

Current weather API 4 w 
Hourty Forecast 4 days 
3-nour Forecast 5 days y v 
Daiły Forecast 16 days - 4 
Climatic Forecast 30 days 
Bulk Downioad 
Road Risk API (basic 
configuration) 
Aur Polluton API (4 + 
Geocoding API c4 4 
weather Triggers w ró 


Developer Professional Enterprise 
from 
140 GBP/monh _ 370GBP/monh — 1500 GBP/ month 
( Subscribe ) Subscribe Subscribe ) 
* w w 
ó v ” 
v v w 
v 4 *R 

v v 4 
w v 
v 
KA v w 
y w (4 
* w w 


informacji o aktualnej pogodzie, jak również 
do 5-dniowej prognozy oraz kilku innych API. 


Jak wysyłać zapytania do API 

Jest to bardzo proste - wystarczy wejść na 
odpowiedni adres, który będzie zapytaniem 
typu GET. 

Adresem, na który wysyłamy zapytanie, jest 
api.openweathermap.ors/data/2.5/wea- 
ther. Do adresu musimy jednak dołączyć 
parametry zapytania, czyli na przykład miej- 
scowość i nasz API key oraz ewentualnie inne 


się zastanawiać, jak złożony jest kod od stro- 
ny backendu, interesować ich będzie część 
wizualna i to, jak się korzysta z aplikacji. Bez 
graficznych dodatków nasza aplikacja będzie 
jedynie tekstową interpretacją danych uzyska- 
nych z API. 

Nam będą potrzebne ikony informujące o po- 
godzie, symbolizujące deszcz, zachmurzenie, 
pełne słońce itp. Można stworzyć własne lub 
skorzystać z gotowych rozwiązań, na przykład 
kupując pakiet grafik. W naszym przypadku 
nie jest to konieczne - OpenWeatherMap za- 


parametry. |pemato = 
W ten sposób uzyskamy dane |-- ——— 

pogodowe do naszej aplikacji 
webowej - musimy jednak wy- 
konać zapytanie wewnątrz kodu, 
a następnie je przetworzyć, aby 
było czytelne dla użytkownika. 


(>) 
Grafika dla aplikacji 
Po wybraniu API trzeba zasta- 
nowić się nad wyglądem naszej " 


aplikacji. Warto poświęcić uwagę 
grafice - użytkownicy nie będą 


Przykład płatnego zestawu ikon pogodowych 


M — EEE" o- 
6 * 6 
zzz 
Weather _ „m. 
UICON SET uczony 
6 6 T 


< c 


f'coord":f"lon":21.6118,"lat":52.2298),"weather":[("id":800,"main":"Clear","description":"bezchmurnie","icon":"e1d")],"base": "stationsj 
i'temp":27.09,"feels_like":27.09,"temp_min":25.78,"temp_max":28.28,"pressure":1015,"humidity":43),"visibility":10000,"wind":f"speed": 
„"sunrise":1656209757,"sunset":1656270083),"timezone":7200,"id":756135,"name":"Warszawa","cod":2 


q"type":2,"1d":2032856,"country":"PL" 


6 api.openweathermap.orq/data/2.5/weather?q- Warszawadiappid-3942f2 


a8iunits-metricalanq=pl 
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własna aplikacja webowa w JS 


openweathermap.org/weather-condi 


OpenWeather 


URL is http'//ope 


nweathermag 


Day icon 
otapng © 


o2apng  % 
03a png 
Oddpng  % 


osapng „* 


10d.png 


ndpng ,% 


13dpng 8 


50d.png 


dk 


For code 500 - light raim icon = 


Guide API Dashboard Marketplace Pricing Maps  Ourlnitu| 
10d", See below a full kst of code 
egimgiwn/' t0dfą2x png 
Icon list 
Night icon Description 
clear sky 
few Cłouds 
>znpng % 
scatlered cłouds 
n. pn 
broken cłouds 
Odnpng % 
snower rain 
o9npny „% 
rain 
10n.png „9% 
inunderstorn 
Hn.png ,* 
sno 
13npng $% 
st 
50n.png £- 


pewnia również darmowe ikony pogodowe, 
z których będziemy mogli skorzystać w naszej 
aplikacji. 


Tworzymy plik HTML 
Zaczynamy od stworzenia kodu HTML 
samej strony, musimy umieścić w nim od- 
powiednie miejsca na elementy aplikacji l. 


Przede wszystkim warto zwrócić uwagę na 

wiersz 6 [-] - korzystamy tutaj z meta-tagu 
viewport. Odpowiada on za przechowywanie 
informacji na temat dostosowania naszej strony 
do urządzeń mobilnych. Nasza strona taka bę- 
dzie, a parametry tego tagu informują, że strona 
zostanie rozciągnięta do 100 procent szeroko- 
ści obszaru ekranu oraz pozostanie w skali 1:1 
z dozwoloną możliwością skalowania. 


3 W wierszu 8 [H| pokazana jest metoda wska- 
zania zewnętrznego pliku CSS. W przypad- 
ku tej aplikacji będzie dużo różnych stylów. 
Gdybyśmy umieścili je w pliku HTML, stałby 
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się on nieczytelny. Dzięki znacznikowi link mo- 
żemy wskazać zewnętrzny plik ze stylami CSS. 


Wewnątrz znacznika body umieszczamy 

dwa znaczniki section, które pozwolą na 
zdefiniowanie dwóch sekcji. Pierwsza sekcja [£] 
będzie zawierać nagłówek, formularz wyszuki- 
wania i pusty element span. Ten element bę- 
dzie widoczny z odpowiednim komunikatem 
pod pewnymi warunkami. W szczególności, 
jeśli nie są dostępne żadne dane pogodowe dla 
żądanego miasta lub dane dla tego miasta są 
już znane. Dodatkowo do pola wprowadzania 
dodajemy atrybut autofocus. Dzięki temu po 
załadowaniu strony znacznik pisania będzie 
ustawiony w tym polu. 


5 Druga sekcja IH jest przeznaczona na listę 
miast. Domyślnie nie będzie w niej miast, 
ale gdy zaczniemy szukać pogody dla konkret- 
nego miasta, jeśli dane pogodowe są dostępne, 
odpowiedni element (miasto) zostanie dołączo- 
ny do listy. Dodatkowo poza znacznikiem sec 
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<!DOCTYPE htm1> 
<html lang-"pl-PL"> 
<head> 
<meta charset="UTF-8"> 


<meta http-equiv="X-IA-Compatihle" rontent="TF=edge"> 
|B | <meta name="viewport" content="width=device-width, initial-scale=1.8"> 
<title>Aplikacja pogodowa</title> 
|C| <link rel="stylesheet" href="pogoda-style.css" 
</head> 


<body> 


v 


<section class="top-banner"> 
<div tlass="tunLainer"> 
<h1i class="heading">Aplikacja pogodowa</h1> 
<torm> 
autofocus> 


<input type-"text" placeholder-"Podaj nazwę miejscowości" 
<hutton tyne="<uhmit">WYŚ! T1</hutton> 


pogoda.htmi . pogoda-style.css 


<span class="msg"></span> 
</form> 
</div> 
</setLiun> 
<section class-"ajax-section"> 
<div class="container"> 
<ul class="cities"></ul> 
</div> 


</section> 


</body> 
28 </html> 


<script src="pogoda.js"></script> 


tion umieszczamy znacznik script i wskazuje- 
my nazwę pliku z kodem JavaScript. 


Określamy style CSS 

Nasz plik będzie zawierał style niezbędne do 
prezentacji tła, resetowania i obsługi różnych 
elementów aplikacji IJ (następna strona). 

To co kluczowe, a wcześniej nie było omawia- 
ne, to prezentacja naszej aplikacji przy różnych 
rozdzielczościach. 

Ponieważ dostosowujemy naszą aplikację do 
ekranów mobilnych i będziemy wyświetlać 
w niej potencjalnie wiele różnych miast w trak- 
cie jednej sesji, musimy odpowiednio zadbać 
o prezentację w zależności od rozdzielczości 
ekranu użytkownika. Skorzystamy do tego 
z opcji Qmedia screen and (max-width: 
700px) 

Wiersze 203-222 [3 pozwalają na zdefiniowa- 
nie prezentacji sekcji pierwszej na dwa sposo- 
by. Jeśli wartość szerokości dla rozdzielczości 
okna przeglądarki jest mniejsza niż 700px, 


obszar formularza zostanie podzielony na dwa 
wiersze. W przypadku okna o wyższej roz- 
dzielczości informacja będzie prezentowana 
w jednym wierszu. 

W przypadku sekcji drugiej, w której będą 
informacje pogodowe, w zależności od roz- 
dzielczości będziemy prezentować cztery, trzy, 
dwie lub jedną kolumnę z danymi. Ma to duże 
znaczenie w przypadku smartfonów - nasza 
aplikacja jest bardzo elastyczna i prezentuje się 
dobrze w dowolnej rozdzielczości. 


Dodajemy kod JavaScript 

Po utworzeniu tych elementów jesteśmy goto- 
wi na tworzenie samego kodu JS. Najczęściej 
tworzy się te trzy elementy jednocześnie, do- 
dając lub odejmując fragmenty kodu, tak aby 
uzyskać satysfakcjonujący efekt. W każdej 
chwili może się okazać, że czegoś nie przewi- 
dzieliśmy, że na przykład trzeba dodać przycisk 
w głównym widoku, który musimy zakodować 
w kodzie HTML, sformatować nowym stylem 
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:root ( 
bg_main: 824144; 
text_light: ttfff; 
--text med: 53627c; 
--text dark: 1e24]2; 
--red: fłff1e42; 
--darkred: tc3112d; 
--orange: ftff8c60; 


at 


color: inherit; 


text-decoration: none; 


., 
margin: a; 
padding: a; 

border-box; 


box-sizing: 


font-weight: normal; 


button 4 


cursor: pointer; 


input ( 
webkit appearance: none; 


button, 
input 4 
border: none; 


background: none; 


No results found for 'const filteredArray 


EJ Gredia screen and (max-width: 708px) 


.heading, 
.ajax-section .city-temp ( 
font-size: 3rem; 


„ajax-section 


margin-top: 28px; 


.top-banner form ( 
flex-direction: column; 


align-items: flex-start; 


.top-banner form input, 
.top-banner form button £ 
width: 188%; 


.„top-banner torm button 4 
margin: 2epx 8 © 8; 


.top-banner form .msg ( 
position: static; 


max-width: none; 


r 


i 


informacja o aktualnej pogodzie w danym 
mieście. 


Na początku deklarujemy zmienne, 


w pliku CSS, a w kodzie JS musimy przypisać 
mu instrukcje. 

W naszym kodzie chcemy umieścić instrukcje, 
które sprawią, że za każdym razem, gdy użyt 
kownik w pole tekstowe wprowadzi nazwę 
miasta i kliknie na przycisk WYŚLIJ, pojawi się 


z których będziemy korzystali [-l. 


Po kliknięciu przez użytkownika na 

WYŚLIJ musimy zatrzymać przesyłanie 
formularza, aby zapobiec ponownemu zała- 
dowaniu strony oraz przechwycić wartość 
z pola tekstowego [H. 


G On 


DyJavaScnpt_KS/appfegodowa/pogo.. |? 


Aplikacja pogodowa 


WYŚLIJ 


Podaj nazwę miejscowości 


Więcej niż 700px 
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Mniej niż 700px 
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fmedia screen and (max-width: 568px) £ 
body 4 
padding: 15px; 


„ajax-section .cities £ 
grid-template-columns: repeat(1, 1fr); 


Aplikacja pogodowa 


Podaj nazwę miejscowo: 


Prezentacja pełnego układu czterokolumnowego 
dla dużych rozdzielczości 


Musimy wykonać żądanie AJAX, aby uzy- 

skać dane pogodowe dla naszej aplikacji. 
(Tu warto wyjaśnić, co oznacza ten skrót - 
patrz ramka na kolejnej stronie). Przy pierw- 
szym wysłaniu żądania przez użytkownika za- 
kładamy, że nasza aplikacja nie wykonywała 
żadnego żądania AJAX i dopiero na tym etapie 
wykonamy żądanie do OpenWeathetMap API 
i przekażemy w żądaniu parametry: 


Aplikacja pogodowa 
Podaj nazwę miejscowości 


WYSLIJ 


Warsaw GB 


287 


Łódź Voivodeship 
GB 


28" 
© 


CLEAR SKY 


CLEAR SKY 


Athens ©% Oslo GB 


Prezentacja układu dwukolumnowego dla 
mniejszych ekranów, w tym urządzeń mobilnych 


m nazwa miasta, która będzie wartością po- 
braną z pola wyszukiwania, 

m klucz API, nasz prywatny klucz uzyska- 
ny podczas procesu rejestracji w Open- 
WeatherMap API, konieczny do uzyskania 
danych z serwera, 

m jednostki temperatury - w naszym przy- 
kładzie stopnie Celsjusza, 

m język danych, domyślnie dane otrzymywa- 
ne z serwera są w języku angielskim, my 
oczekujemy danych w języku polskim. 


To, co chcemy uzyskać, 


musimy zweryfikować 
z dokumentacją OpenWea- 
therMap API, czy i jakimi pa- 
rametrami możemy otrzymać 
oczekiwane przez nas rezul- 
taty. Po dokładnej analizie do- 


const form - document.querySelector(".top-banner form"); 
const input = document.querySelector(".top-banner input"); 
const msg - document.querySelector(".top-banner .msg"); 
const list = document.querySelector(".ajax-section .cities"); 
var apiKey = "WPROWAD7 SWOJ KILICZ TUTAJ"; 

EJ form.addkventListener( submit", e -> f 


t 
e.preventDefault(); 


const inputval = input .value; 


const listItems = list.querySelectorAll(".ajax-section .city"); 


kumentacji uzyskamy odpo- 
wiednią wartość zapytania. 


Zgodnie z dokumentacją 
w zapytaniu podajemy 
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NJAX 


AJAX (Asynchronous JavaScript and XML) 
to technologia pozwalająca na odświeża- 
nie jedynie części strony, a nie jej całości, 
co odbywa się asynchronicznie. Dane są 
wówczas zaciągane z pliku XML lub TXT 
zlokalizowanego na serwerze za pomocą 
JavaScriptu albo innego skryptu. 

AJAX nie jest zatem językiem programo- 
wania, lecz techniką wykorzystującą inne 
języki. Znajduje zastosowanie przy tworze- 
niu interaktywnych stron, na których dane 
przetwarza się bez konieczności przełado- 
wania całej strony. Wykorzystuje się ją też 
przy pobieraniu danych z zewnętrznego 
API, danych o produktach dostępnych 
w Sklepie internetowym czy przedłużaniu 
w tle sesji aktywnego użytkownika. 
Dzięki asynchroniczności działanie 
przeglądarki nie zostaje zablokowane 
przez skrypt, a przesyłanie danych trak- 
tuje się jako odrębny proces realizowany 
w tle. W ten sposób przeglądarka działa 
znacznie szybciej, niż miałoby to miejsce 
w przypadku działania synchronicznego. 


Co się składa na AJAX 

Podstawowe elementy wchodzące 

w skład techniki AJAX to: 

m XML - jest językiem znaczników, za 
pomocą którego opisuje się odbierane 


odczytane z żądania użytkownika miasto, 
przesyłamy nasz klucz API, następnie dzię- 
ki parametrowi units=metric [-] uzyskamy 
dane w systemie metrycznym, a parametr 
lang=pl [] - pozwala na uzyskanie danych 
w języku polskim. 


Fetch - jak wykonać żądanie AJAX 
Jak już wiemy, aby wykonać żądanie AJAX, 
mamy wiele opcji. Możemy użyć zwykłego 
XMLHttpRequest, nowszego Fetch, a na- 


dane. Często okazuje się jednak, że 
informacje przesyłane są w innym for- 
macie i odbierane w postaci tekstowej. 
Mowa tu o gotowych fragmentach HTML 
czy kodu JavaScript. 

m JavaScript - nie stanowi warunku 
koniecznego, ponieważ zamiast niego 
można użyć innego języka skryptowego, 
na przykład VBScript bądź JScript. 

m XMLHttpRequest — (XHR) pozwala 
na asynchroniczne wysyłanie danych. 
W ten sposób dane mogą być pobierane 
w tym samym czasie z różnych miejsc, 
a użytkownik może wykonywać w trak- 
cie przesyłania danych inne czynności. 

W czystym JavaScripcie do obsługi 

dynamicznych połączeń (XHR) możemy 

skorzystać z dwóch obiektów, czyli 

XMLHttpRequest oraz Fetch. 

Ten pierwszy istnieje od początku istnienia 

AJAX. Mnogość opcji i to, że trzeba napisać 

bardzo dużo kodu, sprawia, że w realnych 

projektach rzadko się korzysta z tej opcji. 

Ten drugi w wielu sytuacjach będzie 

prostszy w użyciu, a to dzięki domyślnej 

obsłudze Promise (obietnic) oraz kilku 
nowym elementom, takim jak Headers, 

Response, Request. Trzeba mieć jednak 

na uwadze, że nie każda przeglądarka go 

obsłuży. 


wet biblioteki JavaScript, takiej jak jQuery 
i Axios. W tym przykładzie użyjemy Fetch. 
Aby pobrać żądane dane, musimy wykonać 
następujące czynności: 


Trzeba przekazać adres URL, do którego 
chcemy uzyskać dostęp do metody fetch(). 


Fetch() zwróci Promise zawierającą 
odpowiedź (obiekt Response). Nie 
będzie to jeszcze rzeczywista odpowiedź, 


Alang 


inputval)Rappid=$(apiKey)Auni ts=metr 
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tylko odpowiedź HTTP. Aby 
pobrać dane odpowiedzi w żą- 
danym formacie JSON (jest to 
domyślny format danych Open- 


fetch(ur1) 
„then(response -> response.json( )) 
„.then(data => £ 


) 


WeatherMap), użyjemy metody 
json() obiektu Response. 
jA 


+2» 


.catch(() => £ 
msg.textContent = "Nie znalezionego szukanego miasta] e':LI 


'Ta metoda zwraca kolejną 
Promise. Gdy zostanie speł- 
niona, dane będą dostępne do manipulacji. 


Jeśli z jakiegoś powodu żądanie nie po- 
wiedzie się, na ekranie pojawi się odpo- 
wiedni komunikat FI. 


Weryfikacja zapytania 
Możemy już teraz zweryfikować działanie zapy- 
tania i uzyskać dostęp do danych odpowiedzi. 


Po uruchomieniu aplikacji w przeglądarce 
od razu uruchamiamy konsolę, a następ- 
nie przechodzimy do zakładki Network []. 


Teraz podajemy nazwę miasta do pola 

wyszukiwania i klikamy na WYŚLIJ. Na 
liście zapytań pojawi się odpowiedź uzyska- 
na z serwera - klikamy na nią EJ. 


Przechodzimy do zakładki Preview [A. 
W tym widoku będziemy mogli podejrzeć 


dane w formacie JSON, które musimy obsłużyć 
w naszej aplikacji. Ilość danych jest ogromna, 
wykorzystamy tylko niektóre z nich. 


* lleaders  Payload Preview Response  Ini 


w fcoord: (lon: 21.0118, lat: 52.2298),..) 
hase: "statinns" 
b clouds: 4all: 6ł 
tod: 268 
bcoord; (lon: 21.0118, lot: 52.2298) 
dt: 1656241774 
id: 756135 
pmain: itemp: 29.69, feels like: 29.04, tel 
name: "Warszama" 
type: 2, id: 2032856, country: "PL" 
ne: 7208 
visibility: 10000 
pmeatner: [fid: 888, main: "Clear", descri 
mind: (speed: 7.2, deg: 140) 


|zawaŚlappid... 


Jeśli po wpisaniu poprawnej nazwy miasta 

otrzymamy błąd „Nie znaleziono szukane- 
go miasta”, otwieramy konsolę przeglądarki. 
Możemy tam znaleźć informacje o błędach. 
W tym przypadku otrzymaliśmy z OpenWea- 
therMap API odpowiedź z kodem 401, co ozna- 
cza, że nasze zapytanie nie przeszło walidacji 


Q Apikacjo pogodowo x + 
G OQOPi| DyJavaScript KS/appPogodowa/pogoda.htmi |A| 
* «+. Sources Network 
Aplikacja 8 siz* 
Fr M-de dala A Fetcwy/XHR JS CSS Img Meda Font Doc WS$ W 
d i | 
P d . . . z Name * Header Prenem Response batc Twin g 
DADDWNNZOZZZE U W ESMITECECEWNEK PETER 
© pogoda-style.ess Request URL: £11e:///0:/Java$eript_K$/aqpPogocowa/pogada html 
WY ŚLIJ Request Method: GET 
RAN ZPEĆ Status Code: © 
* Response Ieaders 
Content-Type: text/htel 
last Modified: Sun, 2 un 2822 03:64:32 GMT 
* Response Headers View t0urci 
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© Aplikacja pogodowa x 


+ 
© QPi 


NAILCIHE 
pogodowa 


D:/JavaScript_K5/appPogodowa/pogoda.html 


Podaj nazwę miejscowości 


WYŚLIJ 


er OEMHOoMMAa 


Recorder A 


»* i $ 


Console 


BIOMLESJCERZG: 
żlane=tl 481 (Unauthorized) |D| 


i należy podać odpowiednie dane autoryzujące 
[2]. W takim przypadku należy zweryfikować, 
czy mamy podany poprawny API key w kodzie 


JS. 


Zebranie potrzebnych danych 

Po uruchomieniu żądania AJAX za każdym 
razem, gdy wpiszemy miasto w polu wyszu- 
kiwania, API zwróci dane pogodowe, jeśli są 
dostępne. Naszym zadaniem jest teraz zebra- 
nie tylko tych danych, których potrzebujemy, 
a następnie utworzenie powiązanego elementu 
listy i na koniec dodanie go do tej listy. 


Następnie tworzymy listę i jej nowy 

element, do którego przypisujemy po- 
szczególne wartości uzyskane z zapytania 
API. Zaokrąglamy też odczyt temperatury. 
OpenWeatherMap API dostarcza danych do- 
tyczących temperatury z dokładnością do 
dwóch miejsc po przecinku. W naszej apli- 
kacji chcemy wartości całkowitych, dlatego 
korzystamy z metody math.round() El. 


Na koniec po poprawnym obsłużeniu żą- 
dania AJAX musimy wyczyścić wszystkie 
niezbędne elementy, aby przygotować się na 


const li = document.createElement("li"); 
1i.classl ist.add("city"); 


const markup = 


<h2 class="city name" data namc-"$ (name) ,$(sys.country) "> 


<span>$(name]</span> 
<sup>$fsy>. tountLry)</ sup> 
</h2> 


<div class="city-temp">$+Math.round(main. temp) )<sup>*C</sup></div 


<figure> 


<img class="city-icon" src=$ficon) alt=$fweather[8]["main"])> 
<figcaption>$fweather[e]["description" ])</figcaption> 


</figure> 


; 
li.innerliTML — markup; 
list.appendChild(1i): 


kolejne żądanie użyt: 
kownika. Czyścimy 
zawartość zmiennej 
msg, czyścimy formu- 


msg.textContent 
form.reset(); 
input.focus(); 


2); 


larz oraz umieszczamy 
znacznik wpisywania 
w pole wprowadzania. 
Gotowe - teraz może- 


W wierszu 20 deklarujemy zmienne, któ- 

re będą zawierać odpowiedź z serwera, 
w wierszu 21-23 deklarujemy zmienną icon, 
która pozwoli na wyświetlanie ikon pasują- 
cych do pogody po kodzie zwracanym z od- 
powiedzi zapytania API. Jest to zgodne z do- 
kumentacją OpenWeatherMap APL 


my przystąpić do ko- 
rzystania z własnej aplikacji pogodowej E]. 


Jak rozbudować aplikację 

Możemy rozszerzyć wyświetlane informacje. 
Wystarczy dodać kilka linii kodu, aby wyświet- 
lić kolejne dane, które otrzymujemy z API. 


const £ main, name, sys, weather ) = 


const icon - "https://openwcathermap.org/img/wn/$ ( 


wealher[8][" icon" ] 
)G2x.png" ; 


data; 


Poniżej znacznika <figure> [BH do- 
dajemy kolejny, ale z parametrem 
dotyczącym wartości ciśnienia, którą 
uzyskamy z wartości main.pressure. 
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Podaj nazwę miejscowości 


WYŚLIJ 


Nowy Jork © 


24” 


Warszawa Gb 


30" 


Po zapisaniu pliku, odświeżeniu aplikacji 
i wyszukaniu konkretnego miasta pozna- 
my dane dotyczące ciśnienia El. 


Warszawa GB 


30" 


BEZCHMURNIE 


CISNIENIE. 1014 HPA |D| 


Jeśli chcemy dodać informacje o prędko- 

Ści wiatru, będziemy musieli wprowadzić 
nieco więcej zmian. W sekcji odpowiedzial- 
nej za przypisywanie do zmiennych wartości 
z zapytania musimy dodać wpis wind. 


W odpowiedzi z serwera 

zgodnie z dokumentacją 
API otrzymujemy informacje 
o prędkości wiatru wyrażoną 
w metrach na sekundę. Aby 
te dane były bardziej czytel- 
ne, musimy przekonwertować 
otrzymaną wartość na jednost 
kę km/h. Robimy to poprzez 
mnożenie otrzymanej wartości 
razy 3.6[H (w kodzie stosujemy 
zapis angielski). Następnie wy- 
konujemy zaokrąglenie do liczb 
całkowitych. 


k | Dy/lawaScnipt_KS/appPogodowa/pogoda.htmi 


Aplikacja pogodowa 
Podaj nazwę miejscowości 


WYŚLIJ 


Warszawa © 


307 


Wenecja © 


sz” 
IE 


BEZCHMURNIE BEZCHMURNIE 
CIŚNIENIE: 1014 HPA CIŚNIENIE: 1014 HPA 
WIATR: 20Kkw/H [i] WIATR: 16 KM/H 


const 4 


main, name, sys, weather, wind ) 


Po zapisa- 
niu pliku, 


= data; 


Następnie trzeba dodać kolejny element, 
figure, w którym musimy obsłużyć 
zmienną odpowiadającą predkości wiatru. 


odświeżeniu aplikacji i wyszukaniu mia- 
sta poznamy również dane dotyczące wia- 


tru BH. 


48 kfigure> 


zI£i mim 


<figcaption> Wiatr: $£Math.round(wind.speed*3.6)) km/h</figcaption> 


1-2 
37 M <figure> 


</figure> 


p) 


<figcaption>Ciśnienie: $(main.pressure) hPa</figcaption> 
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własna aplikacja webowa w JS 


DODAJEMY IKONY DLA WIATRU I CIŚNIENIA 


Warto dodać ikony dla nowo wyświetla- 
nych informacji dotyczących ciśnienia 
i wiatru. Tylko że takich ikon nie znaj- 
dziemy w bazie OpenWeatherMap API, 
musimy je wyszukać sami. 


Wchodzimy na witrynę flaticon.com, 
na której możemy znaleźć tysiące 
darmowych ikon. 
W flaticon 


Access 7.6M+ vector icons £ stickers 


Wpisujemy na przykład frazę wind 
i wyszukujemy. 


Następnie klikamy prawym przycis- 

kiem myszy na ikonę, która nam 
odpowiada, i wybieramy opcję LGTIT]| 
jadres obrazu 


$(main.pressure) 


Teraz w kodzie JS dodajemy w obszarze 

figure obiekt img i wskazujemy jako 
adres skopiowany adres wybranej ikony A. 
Po zapisaniu pliku, odświeżeniu aplikacji 
i wyszukaniu konkretnego miasta zoba- 
czymy nowe ikony w oknie aplikacji. 


Aplikacja pogodowa 


Podaj nazwę miejscowości 


Uwaga! Korzystając z ikon umieszczanych 
na serwisach zewnętrznych, powinniśmy 
dodatkowo umieścić skrypt do weryfikacji 
linków, tak abyśmy byli informowani, gdy 
na naszej stronie przestaną funkcjonować 
odnośniki, które wskazują dokładny adres 
pliku z ikoną. 
Można oczywiście dostosować rozmiar 
ikony oraz jej położenie w każdej z sekcji 

margin-top: 1 

margin-l: 

width: 5 


margin- top 
margin 1 
width: 58px; 
height: 56px; 


1 
1 


$(Math.round(wind.speed*3.6)) 


92 JAVASCRIPT, HTML, CSS, PHP, WORDPRESS 


adam1l3zajacigmail.com 


- wystarczy dodać odpowiedni opis stylu 
w pliku CSS w sekcji drugiej. 

Oraz zmienić nazwę class w ramach, 
w jakich mają być formatowane nowe 
ikony w pliku z kodem JS. 

Zmiany można obejrzeć po zapisaniu 
dokumentów i ponownym załadowaniu 
strony. 


TESTUJEMY APLIKACJĘ W TRYBIE „UELI 


Jak już wiemy, nasza aplikacja powinna 
odpowiednio się skalować i zmieniać swój 
wygląd w zależności od rozdzielczości. 
Google Chrome umożliwia przetestowanie 
na komputerze działania aplikacji czy 
witryny w trybie mobilnym, symulując jej 
wyświetlanie tak, jakby miało miejsce na 
ekranie smartfona. 


Uruchamiamy 

naszą aplikację 
w przeglądarce 
Google Chrome, 
a następnie korzystamy ze skrótu kla- 
wiaturowego [4d +(M) lub klikamy 
na symbol smartfona na pasku narzędzi 
deweloperskich. 


WASJIWHDimensionsk SEE EchJ 
zurządzeń lub wskazujemy rozdzielczość. 


Następnie możemy przetestować 
działanie aplikacji. W celu wykonania 


[efefe [ofe [o VE] 


iejscowości 


obrotu ekranu o 90 stopni kli- 
kamy na górnym pasku na ikonę 
obrotu. 
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HTML, CSS 
i JavaScript 
w pigułce 


Ten rozdział to nie tylko podsumowanie wiadomości o HTML, 
CSS i JS. Poznamy w nim też znaczniki, które do tej pory się 
nie pojawiły, a są przydatne. W rozdziale tym są omówione 
najważniejszych elementy języka JavaScript 


P odstawowe znaczniki, z jakich zbudowa- 1 ZIDOCTYPE htmlB 
ne są dokumenty HTML, to html, head SE <html> 

i body. Wiemy już, że pierwszy z nich ota- 3 t <head> 

cza całość dokumentu. Drugi odpowiada za 4 

funkcjonowanie strony, a trzeci za jej treść. s l złuewie 
Przyjrzyjmy się innym istotnym znacznikom. 6 <body> 


Szkielet dokumentu, od którego zazwyczaj 8 </body 
rozpoczynaliśmy pracę zHTML-em 9 </html> 
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Podstawowe znaczniki HTML 


D o tej pory omówiliśmy jedynie kilka 
znaczników wpływających na wygląd 
strony. Zwróćmy uwagę na to, że układ wielu 
stron internetowych jest podobny. Jest tak dla- 
tego, że w języku HIM[5 znajdują się znaczni- 
ki blokowe, dzielące stronę na logiczne części. 


ARTICLE 

Jednym z takich znaczników specyficznych 
dla HTMI5 jest article, czyli artykuł. 

To znacznik, którym wydziela się samodziel- 
ną część strony. 

Dobrze sprawdza się na przykład w przypad- 
ku bloga czy innych tekstów, pomaga w sy- 
tuacji, gdy po dodaniu obrazów do wpisów 
treść zaczyna się nieco rozjeżdżać, a także 
wtedy, gdy chcemy po prostu uporządkować 
teksty. 

Oto przykładowy efekt: 


Na wpis składa się nagłówek i paragraf. Te 
dwa elementy powinny być otoczone znacz- 
nikiem article - dla każdej takiej pary. Samo 
dodanie znacznika nie poprawi jeszcze wy- 
glądu strony, ale bardzo ułatwi nam to zada- 
nie. Będziemy mogli zdefiniować wygląd dla 
każdego znacznika article. Jeśli poprzez CSS 
nadamy temu znacznikowi określoną wyso- 
kość (height), to elementy z różnych wpi- 


sów nie będą już na siebie - 
sA artiele 
nachodzić. p 


SECTION : 


height: 220px; 


Zwykle poszczególne ar- 
tykuły, czyli znaczniki ar- 
ticle, tworzą pewną spój- 
ną całość. W przypadku 
naszego pierwszego pro- 


<section> 


</article> 


<article classz 
<h2>Mozilla F 
<p> wieloplat| 
Mozilla Cd 


jektu, bloga, artykuły mo- 


G  QPlk| Dy/JavaScript_KS/article.html 


Najbardziej popularne przeglądarki 


Google Chrome 


Mozilla Firefox 


Microsoft Edge 


Pierwsza wersja beta została wydana 2 września 2008, a pierwsza stabilna wersja została udostępniona 11 grudnia 2008. Według serwisu Sta” 


wieloplatformowa przeglądarka internetowa o otwartym kodzie źródłowym oparta na silniku Gecko, stworzona i rozwijana przez Mozilla Fa] 


Microsoft Edge (pierwotnie opracowywany pod kryptonimem Project Spartan) — przeglądarka internetowa firmy Microsoft. Oficjalnie zapre: 


Znacznik article może pomóc w naprawie 
tak wyglądającej strony. Można wykorzystać 
go do wydzielenia poszczególnych wpisów. 


<article class="hrawser"> 
<h2>Google Chrome</h2> 
<p>Pierwsza wersja beta zostata wydana 2 
Według serwisu Statcounter.com w styczĄ 
</article> 
<arLicle tlass="bruwser"> 
<h2>Mozilla Firefox</h2> 
<p> wieloplatformowa przeglądarka internq 
Mozilla Corporation oraz wolontariuszy 
</article> 
<article class="browser"> 


żemy połączyć w sekcję poprzez otoczenie 
ich znacznikiem section. W taki sposób mo- 
żemy wydzielić sekcję główną strony, obok 
której możemy dać sekcję boczną zawierają- 
cą treści mniej istotne dla samej strony. 


ASIDE 

Znacznik aside reprezentuje sekcję pobocz- 
ną. Może ona być uważana za odrębny ele- 
ment strony, zwykle służy do prezentowania 
specjalnych, odrębnych treści, na przykład 
reklam, notki o autorze lub informacji o por- 
talu, na którym znajduje się strona, czy też 
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HTML, CSS i JavaScript w pigułce 


o innych promowanych, powiązanych stro- 
nach. Znacznika tego używa się także często 
do dodawania ramek wyjaśniających poja- 
wiające się w tekstach terminy. 


MAIN 

Wpisy na blogu oznaczone jako jedna wspól- 
na sekcja i sekcja boczna aside mogą być 
ujęte razem jako część główna strony, czyli 
najważniejszy zasób treści. Do takiego ozna- 
czenia używa się znacznika main. 


HEADER 

Jeśli mówimy o treści głównej, to należy 
wspomnieć jeszcze o tym, co jest wspólne dla 
całej strony, czyli o nagłówku. Do nagłówków 
tekstowych służą znaczniki h1 (oraz h2, h3, 


Selektory 


rzyjrzyjmy się ogólnym możliwościom 

CSS. Podstawą jest to, że możemy kon- 
kretnym elementom strony nadawać odpo- 
wiedni wygląd. 
Zacznijmy od określenia elementów, jakim 
nadajemy wygląd. I tu pojawia się słowo se 
lektor - jest to coś, co pozwala wyselekcjo- 
nować element z dokumentu HTML, tak by 
można było „osobno” zdefiniować dla niego 
wygląd. Ogólny zapis wyglądu w CSS ma na- 
stępującą formę: 


selektor 
1 
właściwość 1: wartość; 
właściwość 2: wartość; 


ł 


W miejsce słowa selektor możemy podsta- 
wiać różne elementy. Jakie? 


W zadaniach, które zrealizowaliśmy 
w poprzednich rozdziałach, selektorem, 
jakiego najczęściej używaliśmy, była nazwa 
znacznika. W ten sposób odnosiliśmy się do 
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h4, h5 aż do h6 - oznaczające kolejne, coraz 
niższe stopnie nagłówków). Nagłówkiem ca- 
łej strony jest znacznik header. W nim można 
umieścić na przykład logo i inne elementy, 
które chcemy mieć oznaczone w kodzie stro- 
ny jako jej część nagłówkowa. 


FOOTER 

Oprócz znacznika odpowiedzialnego za 
część nagłówkową strony jest też znacznik 
dla stopki strony. To znacznik footer - 
umieszcza się go na końcu i zapisuje w nim 
na przykład informację o autorze. 


<fovter> 2622, Krzysztof Dziedzic</footer> 
</hody> 
</html> 


nazwa znacznika 


t 
właściwość 1: wartość; 
właściwość 2: wartość; 


ł 


wszystkich znaczników o podanej nazwie, 
jakie znalazły się w dokumencie. 


Innym omawianym przez nas selektorem 
były klasy. Jeśli chcemy nadać styl znacz- 
nikom konkretnego typu, które wcześniej 
umieściliśmy w jednej klasie, jako selektor 
podajemy najpierw nazwę znacznika, a po- 
tem nazwę klasy (po kropce). 
Oto schemat: 


nazwa znacznika.nazwa klas 


t 


właściwość 1: wartość; 
właściwość 2: wartość; 


) 


Jeśli mamy klasę, do której przypisaliśmy 

wiele znaczników różnych typów, i dla 
nich wszystkich chcemy nadać wspólny styl, 
jako selektor podajemy nazwę klasy poprze- 
dzoną kropką. Oto schemat: 
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„nazwa klasy 

t 
właściwość 1: wartość; 
właściwość 2: wartość; 


+ 


W naszych przykładach pojawiło się tak- 

że nadawanie stylu znacznikom zagnież- 
dżonym. Jeśli chcemy nadać styl znacznikom 
danego rodzaju, ale tylko tym, które wcześ- 
niej umieszczono w innym konkretnym 
znaczniku, jako selektor najpierw podajemy 
nazwę znacznika zewnętrznego, wewnątrz 
którego znajdują się znaczniki, którym chce- 
my nadać styl, a po spacji nazwę znacznika, 
dla którego styl nadajemy. Oto schemat: 


znacznik zewnętrzny znacznik wewnętrzny 
1 
właściwość 1: wartość; 
właściwość 2: wartość; 


Innym sposobem nadawania stylu wybra- 

nym znacznikom jest selektor wskazują- 
cy na id znacznika. By nadać styl znaczniko- 
wi o konkretnym id, jako selektor podajemy 
właśnie id, ale poprzedzamy je znakiem tł. 
Oto schemat: 


Hid znacznika 
t 
właściwość 1: wartość; 
właściwość 2: wartość; 


ł 


Kolejny sposób podawania selektora to 

połączenie dwóch nazw plusem. Wbrew 
pozorom nie zadziała to tak, że nada dwóm 
grupom znaczników taki sam wygląd. Ta me- 
toda opisuje styl tylko dla znacznika podane- 
go po plusie i to tylko wtedy, gdy występuje 
bezpośrednio po znaczniku podanym przed 
plusem. I tak img + h1 nada styl znaczniko- 
wi h1, jeśli ten występuje bezpośrednio po 
znaczniku img. Oto schemat: 


znacznik poprzedzający + nazwa znacznika 
1 
właściwość 1: wartość; 
właściwość 2: wartość; 


Nieco podobne jest łączenie znaczników 

poprzez znak >. Ten sposób również po- 
zwala na nadanie stylu znacznikowi podanemu 
po znaku, jednak odnosi się do znaczników 
zagnieżdżonych i nadaje im styl tylko wtedy, 
gdy są bezpośrednimi „dziećmi” znacznika po- 
danego przed znakiem. Nie mogą być zagnież- 
dżone w „dziecku” znacznika przed znakiem. 
Oto schemat: 


nazwa rodzica > nazwa znacznika 
właściwość 1: wartość; 
właściwość 2: wartość; 


) 


Jeśli chcemy nadać styl pierwszemu 

znacznikowi zagnieżdżonemu w poda- 
nym znaczniku (jego pierwsze „dziecko”), 
możemy po nazwie znacznika dać znak dwu- 
kropka i napisać first-child. Oto schemat: 


nazwa rodzica:first-child 
t 
właściwość 1: wartość; 
właściwość 2: wartość; 


ł 


Analogicznie jak do pierwszego „dziec- 

ka” możemy odnieść się też do ostatnie- 
go znacznika zagnieżdżonego w znaczniku, 
jednak w przeciwieństwie do poprzedniego 
przykładu piszemy w tym wypadku last- 
-child zamiast first-child. Oto schemat: 


nazwa rodzica:last-child 

t 
właściwość 1: wartość; 
właściwość 2: wartość; 


ł 
1 0 Do dwóch wcześniej opisanych przy- 
kładów podobne jest wykorzystanie 
only-child, które pozwala na nadanie stylu 
znacznikowi, jeśli jest on jedynym „dziec- 
kiem” podanego przed dwukropkiem znacz- 
nika. Oto schemat: 


nazwa rodzica:only-child 


t 


właściwość 1: wartość; 
właściwość 2: wartość; 


) 
JAVASCRIPT, HTML, CSS, PHP, WORDPRESS 


97 


adam1l3zajacigmail.com 


HTML, CSS i JavaScript w pigułce 


nazwa znacznika występującego wcześniej + nazwa znacznika 


: [A 


właściwość 1: wartość; 


1 Tworząc selektory, 

możemy też nego- 
wać. Załóżmy, że chcemy 
nadać styl wszystkim znacz- 


właściwość 2: wartość; 
1 Kolejny znak, którym łączymy znacz- 
niki w selektorach, to *. To łącze- 
nie jest podobne do łączenia poprzez plus. 
Nie odnosi się jednak tylko do pierwszego 
znacznika po znaczniku przed znakiem, 
ale do wszystkich znaczników podanych po 
znaku, występujących po znaczniku poda- 
nym przed znakiem. Oto schemat El. 
1 Niektórym znacznikom nadawane 
są różne wartości atrybutów. Przy- 
kładem może być canvas ze zrealizowa- 


nej przez nas gry platformowej, który miał 
nadane id, width i height. Samo nadanie 


nikom div, ale z wyłącze- 
niem wybranych, na przykład bez znaczni- 
ka div i id pole. Wtedy zapiszemy to w ten 
sposób div:not(ipole). Oto schemat: 


nazwa znacznika :not (co wykluczyć) 
t 
właściwość 1: wartość; 
właściwość 2: wartość; 


1 5 Ciekawa i wprowadzająca pewną in- 

teraktywność jest możliwość okreś- 
lenia stylu dla znacznika tylko wtedy, gdy kur- 
sor myszy znajduje się na jego obszarze. Jest 


<canvas id="gra" width="1280px" height="580px"> </canvas> 


to często wykorzystywa- 


znacznikowi wartości dla konkretnego atry- 
butu także może posłużyć jako selektor. I tak 
w wypadku znacznika canvas zapis canvas- 
[height] wskazuje nie tylko na jeden canvas, 
ale też na każdy inny, w którym został użyty 
atrybut height. Uogólniając, tworząc selek- 
tor oparty na atrybucie, najpierw podajemy 
nazwę znacznika, a następnie w nawiasie 
kwadratowym nazwę atrybutu. Oto schemat: 


nazwa znacznika [nazwa atrybutu] 
1 
właściwość 1: wartość; 
właściwość 2: wartość; 


1 Nieco podobnym do poprzedniego, 

jednak jeszcze „węższym” selektorem 
jest możliwość wybrania znacznika z atrybu- 
tem o konkretnej wartości. Wtedy - w od- 
niesieniu do poprzedniego przykładu - po 
nazwie atrybutu podajemy znak równości 
i w cudzysłowie war- 


ne w przypadku przycis- 
ków. By nadać znacznikowi wygląd specy- 
ficzny dla momentu, gdy znajduje się na nim 
kursor, po nazwie znacznika i dwukropku 
piszemy hover. Oto schemat: 


nazwa znacznika:hover 

1 
właściwość 1: wartość; 
właściwość 2: wartość; 


1 Na wielu stronach linki, które nie zo- 

stały jeszcze odwiedzone, wyglądają 
inaczej niż te, na które kliknięto. By nadać 
różny wygląd linkom przed kliknięciem na 
nie i po kliknięciu, po znaczniku a znacz- 
nik a odpowiada za dodawanie linków) w se- 
lektorze dajemy dwukropek i piszemy link. 
Taki selektor oznacza link, na który jeszcze 
nie kliknięto. Gdy link zamienimy na visi- 
ted, nadamy styl tylko linkom odwiedzonym. 


tość, jaką musi mieć 
ten atrybut, abyśmy 
wyselekcjonowali 
znacznik. 

Oto schemat: ) 


t 


nazwa znacznika [nazwa atrybutu="wartość atrybutu" ] 


właściwość 1: wartość; 
właściwość 2: wartość; 
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Właściwości CSS 


W: już, w jaki sposób wyselekcjo- 
nować znaczniki. Teraz zastanówmy 
się, co można zrobić z wyselekcjonowanymi 
znacznikami. 

CSS pozwala na nadawanie różnym właści- 
wościom znaczników nowych wartości. Zaj- 
mijmy się tym, jakie mogą to być właściwości 
i jakie wartości można im nadać. Poznajmy 
najpopularniejsze z nich. 


Właściwości dotyczące tekstu 
W wielu popularnych edytorach tek- 
stowych są przyciski pozwalające na 
wyrównanie tekstu. Tekst na stronie in- 
ternetowej również mo- 
żemy wyrównywać, i to 


MARGINESY 


podobnie, jakbyśmy klikali na przyciski 
w edytorach tekstu. Służy do tego właści- 
wość text-align. 

Nadając jej wartość center, uzyskujemy tek- 
sty wyśrodkowane. Wartość left sprawi, że 
lewa kwawędź tekstu będzie równa, a pra- 
wa - skończy się, gdy zabraknie miejsca na 
kolejny wyraz. Wartość right przesunie tekst 
z wyrównaniem do prawej krawędzi. Właści- 
wość ta ma jeszcze jedną możliwą wartość 
- justyfy, czyli wyjustowanie tekstu - prawa 
i lewa krawędź tekstu są równe, różna jest 
wielkość odstępów pomiędzy słowami. 


Inną właściwością dotyczącą tekstu jest 
text-indent. Właściwość ta odpowiada 


SCHEMAT 


margin: wartość; 


ł 


margin: wartość1 wartość2; 


) 
U 


margin: wartość1 wartość2 wartość3; 
) 


margin: wartość1 wartość2 wartość3 wartość4; 


) 


margin-top: wartość; 


margin-left: wartość; 
ł 
margin-right: wartość; 


margin-bottom: wartość; 


l 


Jeśli do właściwości margin zostanie przypisana tylko jedna 
wartość, zostanie ustawiony margines z wszystkich czterech 
stron treści równy podanej wartości. 

Jeżeli dla właściwości margin zostaną podane dwie 
wartości, to pierwsza z nich odpowiada za wielkość 
marginesu górnego i dolnego, a druga - za wielkość 
marginesu prawego i lewego. 

W przypadku podania trzech wartości pierwsza odnosi 

się do marginesu górnego, druga jest wspólna dla 
marginesu prawego i lewego, a ostatnia dotyczy 

marginesu dolnego. 

Podanie dla właściwości margin czterech wartości pozwoli 
na ustawienie różnych marginesów dla każdej z czterech 
krawędzi. Pierwsza wartość to margines górny, druga prawy, 
trzecia dolny, a czwarta lewy. 


By ustawić jedynie górny margines, możemy nadać wartość 
właściwości margin-top. 


Nadanie wartości dla właściwości margin-left pozwoli 
na ustawienie marginesu lewego. 


Nadanie wartości dla właściwości margin-right pozwoli 
na ustawienie marginesu prawego. 


Dolny margines ustawimy poprzez nadanie wartości dla 
właściwości margin-bottom. 
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za wielkość wcięcia w pierwszym wierszu 
tekstu elementu, dla którego jest ustawiona. 
Wartość tej właściwości może być wyrażona 
między innymi w pikselach. I tak zapis text- 
-indent: 30px; może dać następujący efekt 


Ważną właściwością jest też font-size. 
To rozmiar czcionki. Wartość dla tej wła- 
ściwości także możemy określać w pikselach. 


Nie tylko wielkość czcionki, ale również 
jej rodzaj może być określany poprzez 
CSS. Służy do tego właściwość font-family. 


Marginesy 

Do ustawiania marginesów dla treści służy 
właściwość margin. Marginesy można usta- 
wiać ze wszystkich czterech stron treści. 
Można nadawać wartość tej właściwości na 
różne sposoby. 


Kolory 
Ważnym elementem CSS jest możliwość ko- 
lorowania, na przykład tekstu czy tła. 


Aby pokolorować tekst, nadaje się war- 
tość właściwości color. 


By ustawić kolor tła dla wybranej sekcji 

dokumentu, należy przypisać kolor do 
właściwości background-color. 
Kolory najprościej jest określać angielskimi 
nazwami. Większość przeglądarek rozpozna- 
je nazwy 140 podstawowych kolorów. Ich 
listę można sprawdzić pod adresem 
w3schools.com/cssref/css_colors.asp [1 


Co robić w sytuacji, gdy chcemy nadać 

kolor, który nie występuje na liście? 
Oczywiście i na to są różne sposoby. 
Jednym z nich jest model przestrzeni barw 
RGB. Pozwala on na tworzenie kolorów 


W 655 Colors « EE 
CG a wiehoolscom/czetef/cu colorzagp 
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CSS Reference 


CSS Reference 

CSS Browser Support 
CSS Selectors 

CSS Functions 

CSS Reference Aural 
CSS Web Safe Fonts 
CSS Fallback Fonts 
CS$ Animatabie 

CSS Units 

CSS PX-EM Converter 


CSS Color Values 
CSS Default Values 
CSS Entities 


CSS Properties 
accent-cołor 
align-content 
align-items 
align=self 

al 

ammation 
animation-delay 
animation-direciion 
animation-duration 
animation -fill-mode 
animation-iteration-count 


animation-name 


BOOTSTRAP 


eepPink 


FloralWhite 


Gainsboro 


et GyTZĘwa 


1%: 


HowTo  w3.CSS JAVA 


DodgerBlue 


GhostWhite 
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Selektor kolorów 


RGB CMYK 
227, 30. 141 0%. 87%. 38%. 11% 


arch?q=rgb +color + picker Sroref = ALICZS<ZqwWOUJA -q57WXluuSSGjCdYcTg 


G rgbcolepieker - SzułajwGocy X + 
| GC 6 googiecom/« 

Google rgb color picker 

Q Wszystko Grafika © Zskupy  F) Książk 


Porada: Wyszukuj tylko w języku polskim. Język wyszukiwania możesz określić tutaj: Ustawienia 


seJiedd [m] 


4 


HSV HSL 
326*. 87%. $9% 326'. 78%. 50% 


poprzez podanie trzech wartości liczbo- 
wych, odpowiadających barwom: czer- 
wonej (Red), zielonej (Green) i niebieskiej 
(Blue). Kolory utworzone w ten sposób 
zapisujemy według schematu: 
rgb(wartość_czerwonego, wartość_zie- 
lonego, wartość_niebieskiego). 
Istnieje wiele narzędzi pozwalających na 
wybieranie kolorów z palety i sprawdzanie 
ich zapisu w RGB. Takie narzędzie udostęp- 
nia na przykład wyszukiwarka Google - by 


JEDNOSTKI 


OPIS 


SKRÓT 


z niego skorzystać, należy w nią wpisać fra- 
zę tgb color picker. 


Jednostki wielkości 

Właściwościom odpowiedzialnym za wiel- 
kości można nadawać wartości w różnych 
jednostkach. Zwykle właściwości takie jak 
wysokość (height), szerokość (width) czy 
margines wyraża się w pikselach. To jednak 
nie jest obligatoryjne. Opis najważniejszych 
jednostek zawiera tabela. 


px piksel - ta miara odnosi się do urządzenia wyświetlającego. W przypadku urządzeń o niskiej 
rozdzielczości 1 piksel odpowiada jednemu pikselowi (kropce) wyświetlacza. W przypadku 
dużych rozdzielczości 1 piksel może oznaczać wiele pikseli wyświetlacza. Przyjmuje się, 

że wielkość jednego piksela to 1/96 cala. 


cm centymetr - co ciekawe, wielkości można wyrażać też w innych miarach, 
jak właśnie centymetry. 

mm milimetr - jeśli chcemy być dokładniejsi, zamiast centymetrów użyjmy milimetrów. 

in cal - wielkości można wyrażać nie tylko w centymetrach i milimetrach, ale także w calach. 
Jeden cal to 2,54 cm. 

pt punkt - 1 ptto 1/72 cala. 

% Ważnym sposobem wyrażania wielkości jest podawanie wartości procentowej. 


Wielkość stanowi wtedy określony procent wielkości rodzica. 
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JavaScript - podsumowanie 


mówiliśmy już najważniejsze zagadnienia 
dotyczące HTML:a i CSS - teraz pora na 
JavaScript. Podsumujmy wiadomości na jego 


temat. Przede wszystkim: do 


ż $ <script> 
dodawania skryptów do do- 


kumentu HTML służy znacz- |</script> 


nik script. 


Zmienne, stałe i tablice 

Zaczniemy od czegoś, bez czego trudno 

sobie wyobrazić programowanie - od 
zmiennych. 
Zmienne są jak pudełka na dane. Pozwalają 
na to, by pod określoną nazwą można było 
przechowywać jakąś wartość. 
I tak na przykład możemy mieć zmienną 
o nazwie punkty i pod tą nazwą będzie 
się kryła konkretna wartość, czyli liczba 
punktów zdobytych przez gracza. W Java- 
Scripcie, by utworzyć zmienną, należy ją 
zadeklarować. Zmienne deklarujemy, pi- 
sząc słowo var, a następnie podając nazwę 
zmiennej. Możliwe, choć nieobligatoryjne 
jest od razu nadanie jej wartości początko- 
wej - robimy to po znaku równości. Można 
też zadeklarować zmienną bez podawania 
jej wartości początkowej, nadając ją dopiero 
później. Oto schemat: 


var nazwa zmiennej = wartość początkowa; 
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Nie tylko zmienne pozwalają na przecho- 
wywanie pewnej zawartości pod okreś- 


A jeśli już mówimy o przechowywaniu, 

to warto wspomnieć też o czymś, co na- 
zywamy tablicami. W przybliżeniu można 
powiedzieć, że jest to specjalny rodzaj zmien- 
nych, które pozwalają na przechowywanie 
pod jedną nazwą więcej niż jednej wartości. 
Dane przechowywane w tablicach są ponu- 
merowane, dzięki czemu możemy dostać się 
do każdej z wartości z osobna. By zadekla- 
rować tablicę, podobnie jak w przypadku 
zmiennych po słowie var (lub const, jeśli 
zawartość tablicy ma być stała) podaje się 
jej nazwę. W ten sposób tworzymy zmien- 
ną. Następnie trzeba ją przerobić na tablicę. 
Stanie się ona tablicą, gdy jako wartość przy- 
piszemy do zmiennej nawias kwadratowy. 
Może być pusty. 
Następnie, by nadawać wartości elementom 
tablicy, przypisuje się wartości do nazwy ta- 
blicy, po której umieszcza się nawias kwa- 
dratowy z zawartym w nim numerem, pod 
jakim chcemy w tablicy umieścić konkretną 
wartość. 
Podobnie jest z odczytywaniem wartości 
z tablicy - po nazwie podajemy kwadratowy 
nawias z liczbą (indeksem elementu w tabli- 
cy), by się do niego odnieść. 
Jeśli chcemy od razu nadać wartości ko- 
lejnym elementom tablicy, to podczas jej 
deklarowania wartości odpowiadające ko- 
lejnym elementom (numerowane od zera) 
umieszczamy w nawiasie kwadratowym. 
Oto schemat: 


loną nazwą. Podobnie 
jest ze stałymi. Różni- 
cą jest jednak to, że jak 
wskazuje na to nazwa, 
stała ma wartość, która 


nazwa tablicy[0] 
nazwa_tablicy[1] 
nazwa tablicy[2] 
//1lub 


var nazwa_tablicy = []: 


wartość pierwszego elementu; 
wartość drugiego_elementu; 
wartość trzeciego elementu; 


var nazwa tablicy = [wartość 1, wartość 2, wartość 3, ...]; 


nie zmienia się podczas 
wykonywania programu. Różnica w two- 
rzeniu jest natomiast taka, że zamiast słowa 
var w przypadku stałych podaje się const. 
Oto schemat: 


const nazwa stałej = wartość stałej; 
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By dodać element do tablicy na jej koń- 

cu, można użyć polecenia push. Wywo- 
łujemy je dla tablicy o podanej nazwie, po 
kropce. Po nazwie polecenia, w nawiasie, 
podajemy wartość, którą dodajemy do tabli- 
cy. Oto schemat El. 
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nazwa tablicy.push (wartość do umieszczenia _w tablicy) : LJ 


Innym poleceniem dotyczącym tablic _ Instrukcja warunkowa 


jest length. Pozwala ono na odczytanie, Ważnym elementem programowania 

ile elementów ma tablica. Wartość ta jest za- jest też instrukcja warunkowa. Pozwala 

wsze o jeden większa niż indeks ostatniego _ ona na wykonywanie instrukcji w zależności 

elementu w tablicy. Oto schemat: od innych czynników, czyli od określonego 
warunku. 


nazwa_tablicy.length 


Instrukcję warunkową tworzymy, pisząc if, 


Pętle 


a następnie w nawiasie zapisując warunek, 
który ma być spełniony. Jeśli w wypadku 


Pętle to w programowaniu konstrukcje po- _ spełnienia warunku ma się wykonać tylko 
zwalające na wielokrotne wykonywanie wy- _ jedna instrukcja, możemy napisać ją bezpo- 
branych instrukcji. Mamy różne typy pętli. _ Średnio po nawiasie z warunkiem. 


Jednym z nich jest pętla while -POZWA |j£ (warunek) instrukcja do wykonania; 
la ona na wykonywanie określonych in- —— 


Oto schemat: 


strukcji, dopóki jest spełniony jakiś warunek. 


Oto schemat: 


Jeśli w wypadku spełnienia warunku 
chcemy, by wykonało się więcej instruk- 


while (warunek) 
1 


//blok instrukcji do wykonania w pętli 


) 


cji, blok instrukcji do wykonania umieszcza- 
my w nawiasie klamrowym. Oto schemat [Ą. 


Innym typem jest na- 
tomiast pętla for, któ- 
rą stosuje się, gdy chcemy 
wykonać jakieś instrukcje 
określoną liczbę razy. Waż- 


W jednej instrukcji warunkowej może 
znaleźć się więcej niż jeden warunek. 


if (warunek) B 
( 
//blok instrukcji do wykonania przy spełnionym warunku 


> 


nym elementem tej pętli jest zmienna ste- Różne instrukcje mogą być wykonane, gdy 
rująca. Deklaruje się ją na potrzeby pętliito inne warunki są spełnione. Następne wa- 
tak naprawdę jej wartość jest wyznacznikiem _ runki umieszcza się w nawiasach po else 
tego, czy pętla jest wykonywana, czy nie. if. Kolejne warunki są sprawdzane, gdy 
Dodatkowo z wartości tej zmiennej możemy nie są spełnione wcześniejsze warunki. 
korzystać wewnątrz pętli. Oto schemat [3]. _ Oto schemat E]. 


for (var nazwa_zmiennej_ sterującej = wartość początkowa; warunek_końca; zmiana_zminnej_sterującej) [:] 


//blok instrukcji do wykonania w pętli 


if (warunck) 
t 


> 
else if (warunck2) 


i 


) 


//blok instrukcji do wykonania przy spełnionym pierwszym warunku 


//blok instrukcji do wykonania przy spełnionym drugim warunku 


JAVASCRIPT, HTML, CSS, PHP, WORDPRESS 103 


104 


adam13zajacigmail.com 


HTML, CSS i JavaScript w pigułce 


if (warunek) 
( 


, 
else if (warunek2) 


Instrukcja warunkowa może mieć też 

sekcję else. W niej opisujemy, co ma się 
wykonać, gdy żaden z warunków nie został 
spełniony. Oto schemat 


Alert 

To bardzo ciekawe polecenie. Stosujemy to 
polecenie, by przeglądarka wyświetliła wia- 
domość do użytkownika. 

Treść wiadomości podaje się w nawiasie, po 
słowie alert. Przykładem wykonania wiersza 


alert(”Przykładowy alert!”); jest [Al. Oto 
komunikat 
alert ("Te et ercie") 
7|| te jest wył , 3 5 
| oj 


ALTERNATYWNE IDE DO PROGRAMOWANIA 


Oprócz Atom, którego używaliśmy we 
wskazówkach, warto wypróbować Visual 
Studio Code. To jeden z najpopularniejszych 
darmowych edytorów kodu źródłowego, 
stworzony przez Microsoft jako darmowe 
narzędzie z licencją MIT. Jest wysoce konfi- 
gurowalny, oferuje kolorowanie składni dla 
wielu języków, inteligentne uzupełnianie 
kodu, fragmentów, refaktoring kodu i wbu- 
dowany Git. Obsługuje różne motywy, skróty 
klawiaturowe i rozszerzenia, które dodają 
dodatkowe funkcje. Ma wersje na Windows, 
Linux i macOS. 


Programujemy w wybranym języku 
Zanim zaczniemy pracę w Visual Studio 
Code, musimy sprawdzić, czy nasz SRZYE 
jest wspierany i czy » * « p 
można zainstalować 

dodatkowe narzędzia 

ułatwiające pracę. 


Po uruchomieniu gę 
programu klikamy 


Javascript Debuzger (Nighty 


Jawaócrigt Soippet Pack 


crt and TypeScipt Nghtóy 


po prawej stronie na [(ŻRXTNACNIE. Po 
lewej stronie na liście wyszukujemy język, 
który nas interesuje, i go wybieramy. Po 
prawej stronie znajdziemy szczegółowe 
informacje dotyczące konkretnego języka 

ia, instalujemy go, klikając 


Tworzymy nowy dokument, klikając na 


FilejNew FilefECEIELNALNETAWE 
Klikamy na |[3liE]) SENZY.E i nadajemy 


plikowi dowolną nazwę, a jako roz- 
szerzenie podajemy js — dla plików JS. 
Dzięki temu dla wybranego pliku zostanie 
zastosowane odpowiednie podświetlanie 
składni. 


se wap X A > a 


15 JavaScript (ES6) code snippets 


A Ę 


JavaScript 


W KŚ+ znajdziemy e-wydanie tej Biblioteczki, 
obraz ISO dołączonej do niej płyty z najlep- 
szymi narzędziami do programowania stron 
internetowych i plik PDF książki do pobrania. 


Otwieramy stronę ksplus.pl. Logujemy 
się [[] (używamy konta z serwisu Kom- 
puterswiat.pl). Jeżeli nie mamy konta, 
klikamy na | B] by się zarejestrować. 
B Załóż konto 


Po zalogowaniu się możemy zareje- 
strować kod nadrukowany na płycie 


dołączonej do książki. 
Wystarczy kliknąć na 
[Hi przepisać kod. 


| Moje konto - 


| C| Zarejestruj kod 


Uzyskamy w ten sposób dostęp do 

e-wydania [-] i do bonusowego obrazu 
płyty H. Do ser- 
wisu KŚ+ mo- 
żemy logować 
się z dowolnego 
urządzenia z do- 
stępem do inter- 
netu. 


CZYTAJ E-WYDANIE D 


BONUSY 


UWAGA! W KŚ+ ZA DARMO E-WYDANIE KSIĄŻKI ORAZ PLIK ISO PŁYTY 


POLECAMY INNE NASZE KSIĄŻKI 


?) MISTRZEM A! 


MICROSOFT 


Triki, jak w pełni wykorzystać możliwo- 
ści nowoczesnego pakietu Microsoftu: 
Teams, Excel, OneDrive, PowerPoint, 
Word, Outlook. Przydadzą się w pracy 
i szkole! Na DVD iw KŚ+: wersje 
próbne Office i darmowe alternatywy. 


Wskazówki, jak skutecznie bronić się 
przed szpiegowaniem na komputerze 
i smartfonie oraz zachować prywat- 
ność i anonimowość w internecie. 
Na DVD: najlepsze narzędzia do 
ochrony prywatności. 


Nasze książki w wersji drukowanej kupisz na 
Książki są również dostępne w formie e-wydań na 


JAK PROGRAMOWAĆ STRONY 
I APLIKACJE INTERNETOWE 


Ta książka to wprowadzenie dla wszystkich, którzy planują 
rozpocząć przygodę z tworzeniem stron internetowych. 
Znajdują się w niej treści dla zupełnie początkujących i już 
nieco bardziej zaawansowanych czytelników. Najbardziej 
skoncentrowałem się w niej na nauce JavaScriptu. 
Dodatkowo przedstawiam też inne technologie internetowe, 


Krzysztof takie jak HTML, CSS i PHP. 

Dziedzic Dla zupełnie początkujących pokazuję krok po kroku, jak 
autor książki, szybko i bez wiedzy technicznej w najprostszy sposób 
informatyk założyć własnego bloga w specjalnym serwisie. 


Nieco wyższy stopień wtajemniczenia to stworzenie bardziej 
rozbudowanej strony z wykorzystaniem funkcjonalności 
oferowanych przez WordPressa. W książce znajdziemy 
instrukcje, jak krok po kroku lokalnie postawić serwer, 
zainstalować bazę danych na serwerze PHP i zintegrować 
wszystko z naszą witryną. Dzięki WordPressowi i ogromnej 
ilości dodatków wszystkie te operacje wykonamy w chwilę 

i będziemy mogli rozpocząć tworzenie i testowanie naszej 
witryny. W przypadku tworzenia stron w WordPressie 

w podstawowych zastosowaniach nie musimy mieć wiedzy 
o zaawansowanych technologiach internetowych. 

W dalszej części książki skupiłem się na JavaScripcie. 
Zaczynam od podstaw, wyjaśniając proces programowania 
w tym języku skryptowym. Następnie pokazuję, jak 
integrować skrypty ze stronami internetowymi. Na bazie 
podstawowych wiadomości, krok po kroku przedstawiam, 
jak napisać prostą grę przeglądarkową w JavaScripcie. 
Potem, również krok po kroku, opisuję, jak stworzyć własną 
aplikację webową, która będzie wyświetlać dane o aktualnej 
pogodzie. W tym celu wykorzystamy API z zewnętrznego 
serwera i wykonamy żądania AJAX. 

Na płycie dołączonej do książki znajdziemy narzędzia 
przydatne do wykonania wskazówek, a z KŚ+ (ksplus.pl) 
można pobrać gotowe pliki z omówionymi projektami. 
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